Question

我正在尝试使用CSS sprites来减少页面上的HTTP请求数量。我希望这些图像无边框渲染。

我可以告诉我已经正确配置了CSS，但我遇到了以下渲染问题（注意：Google徽标是故意剪辑的）：

如您所见，所有浏览器仍然呈现边框。此外，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>

谁能告诉我这里我做错了什么？我敢肯定它一定很简单。提前谢谢。

Answer 1

边界属于这个：

<img class="css_sprite"/>

由于图像丢失，它是浏览器绘制的边框。在这里，您不需要指定任何src，因此浏览器会添加边框和缺少的图像图形。

将img更改为其他元素，而不是改为div或span。

Answer 2

我发现一个很好的解决方案只是在src元素中放置一个空白的透明图像（最好是1x1 png）... :)因为图像是透明的，所以src都不会显示不会变成空白并且你的目的已经解决了。 ..

使用CSS Sprites时边框呈现

2 个答案: