使用CSS Sprites時的邊框渲染

我正在嘗試使用CSS sprites來減少頁面上的HTTP請求數量。我希望這些圖像呈現無邊界。使用CSS Sprites時的邊框渲染

，盡我所能告訴我正確配置了CSS，但我遇到的渲染之下的問題（注：谷歌標誌是故意裁剪）：

正如你所看到的，瀏覽器仍呈現邊框。另外，IE和FireFox也呈現'斷鏈'類型的圖標。

在這個例子中使用的HTML是：

<html> 
    <head> 
    <style> 
     img {border:none} 
     img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;} 
    </style> 
    </head> 
    <body> 
    <img class="css_sprite"/> 
    </body> 
</html>

誰能告訴我，我做錯了什麼嗎？我相信它一定是簡單的。提前致謝。

來源

2011-02-06 Chris Lacy

總之，您需要訪問此網站：http://validator.w3.org/。 – reisio 2011-02-06 05:29:15

邊界屬於這樣的：

<img class="css_sprite"/>

這是由因缺少圖像瀏覽器繪製的邊界。在這裏你沒有指定任何src，所以瀏覽器添加邊框和丟失的圖像圖形。

將img更改爲其他元素，而不是div或span。

來源

2011-02-06 03:03:44 BoltClock

我發現了一個很好的解決方案，只需在src元素內放置一個空白的透明圖像（最好是1x1 png）... :)，因爲圖像是透明的，它在所有src中都不會顯示，並且不會變爲空白並且您的目的已經解決...

來源

2014-02-13 11:16:07 sankha

這如何幫助沒有邊界的OP顯示「nav_logo29」？ – 2014-02-13 11:41:13

使用CSS Sprites時的邊框渲染

回答

相關問題