使用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时的边框渲染

回答

相关问题