2011-01-24 100 views
0

我正嘗試在Facebook標籤頁面內使用一個簡單的CSS-sprite進行圖片翻轉,並且背景圖片被Facebook剝離。要明確,這個問題只發生在標籤頁內,但不在主應用程序本身。圖片翻轉Facebook內頁標籤頁

的Facebook也似乎是大約當它去除背景圖像非常挑剔 - 背景圖像施加到錨標籤被除去,但施加到含有錨列表元素背景圖像保持完整。

例如,給定的標記:

<li><a href="http://some/destination.html" target="_top"><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></a></li> 

以下CSS將應用背景,成功列表元素:

li { 
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0; 
} 

,但應用到子錨標記相同的CSS被剝離通過Facebook:

li a { 
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0; 
} 

是否Facebook實際上能夠支持圖像巴如果是這樣,怎麼樣?

回答

0

通過反覆試驗發現了各種解決方案,儘管它涉及無效堆疊的html並且看起來非常討厭。

修改標記所以一個div是錨標記:

<a href="http://some/destination.html" target="_top"><div><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></div></a> 

和背景圖像應用到DIV,而不是錨:

li a div { 
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0; 
} 

然後,您可以應用如下的背景偏移:

li a:hover div { background-position: 0 -43px; } 

它確實有效,但如果任何人都可以提出建議,我寧願選擇一個不太可靠的解決方案。