我还需要在CSS Sprite中填充图像吗？

Question

在CSS Sprites中，您经常会在每个图像之间找到填充。我相信这个想法是这样的，如果页面调整大小，那么一个图像不会流入另一个图像。

我认为这取决于不同类型的浏览器缩放(best explained by Jeff)。

但是，我在测试中未能看到这种行为。这只是旧版浏览器的问题吗？ （我目前无法使用IE6进行测试，因此我将其视为“旧”）。

我还要担心留空吗？这是一种痛苦。

例如：

  

我为AOL找到的CSS Sprite有   每张图片之间的填充：VIEW

     

但The Daily Show决定不这样做   麻烦：VIEW

Answer 1

不应需要填充，但在缩放时，特别是在IE8中（比RC更多），如果没有填充，则会出现图像渗色。

最好的例子是去Google.com - ＆gt;搜索和缩放...当缩放向上/向下舍入时，您将开始在图像的右下角看到“下划线”。

理论上，精灵四周的1px填充应该没问题。

这是Google的精灵（图片）......

但是在缩放时，+， - ，x图标会渗入主要的Google徽标。

Answer 2

基本上答案是肯定的。两年后，我问这个问题将会看到IE9的发布。 IE9也有同样的问题 - 如果不是任何其他浏览器......

这真是令人愤怒，因为修复这么简单。

随着iPad市场份额的增加 - 至少在缩放不均匀数量方面有一半体面的经验至关重要。

我将不得不在每个图像周围放置一个像素边框以匹配相邻元素的背景颜色（每侧可能不同）。幸运的是，我基于.xml文件自动生成所有的csssprites - 所以我可以在没有太多麻烦的情况下以编程方式执行此操作。虽然......但仍然是一个巨大的痛苦。

Answer 3

西蒙 - 我的经验是，这肯定还是个问题。

在回答第二个问题时，为什么不使用透明填充？ （也许你仍然支持ie6，这是非平凡的，在这种情况下，我真的很抱歉）。

Answer 4

说到旧浏览器（使用文本缩放的浏览器），您并不总是需要填充。

两个示例之间的主要区别在于Daily Show sprite已经在图像本身中包含了菜单项的文本。

使用文本缩放时，由于字体较大，AOL菜单项可能会垂直拉伸，菜单文本甚至可能会换行为两行。为了适应这种可能性，这些图标需要一点填充以确保它们不会流血。通常情况下，您只是尝试确保IE6的五种文本大小都不会出血。

由于每日秀的菜单不包含任何（可见的）HTML文本，因此文本缩放不会影响其大小（尽管您可能需要line-height: 0;左右），因此它不会需要任何填充。

正如scunliffe已经显示的那样，使用页面缩放的浏览器可能需要sprite才能因为舍入错误而有一点填充。