在 CSS Sprites 中，您经常会在每个图像之间找到填充。我相信这个想法是，如果页面被调整大小，那么一个图像不会渗入另一个图像。
我认为这取决于不同类型的浏览器缩放（杰夫最好解释）。
但是，我无法在我的测试中看到这种行为。这只是旧浏览器的问题吗？（我目前无法使用 IE6 进行测试，所以我将其视为“旧”）。
我还应该担心留下空间吗？它是一种痛苦。
例如 ：
我为 AOL 找到的 CSS Sprite 在每个图像之间都有填充：查看
但每日秀决定不打扰：查看
Simon
问问题
3858 次
4 回答
16
它不应该需要填充，但是在缩放时，尤其是在 IE8（比 RC 更多的测试版）中，如果没有填充，则会出现图像渗色。
最好的例子是转到 Google.com -> 搜索，然后缩放...随着缩放向上/向下舍入，您将开始在图像的右下角看到“下划线”。
理论上，精灵四面的 1px 内边距应该没问题。
这是来自谷歌的精灵（图片）......
但是当放大时，+、-、x 图标会渗入 Google 的主徽标中。
于 2009-03-15T00:08:02.683 回答
5
基本上答案是肯定的。两年后，我问了这个问题之后，就会看到 IE9 的发布。IE9 也有这个问题——如果不是比任何其他浏览器更多的话......
这非常令人恼火，因为它是一件很容易解决的事情。
随着 iPad 的市场份额不断增加 - 至少有一半体面的缩放不均匀数量的体验非常重要。
我将不得不在每个图像周围放置一个像素边框，以匹配相邻元素的背景颜色（每侧可能不同）。幸运的是，我基于 .xml 文件自动生成所有 csssprites - 所以我可以以编程方式执行此操作而不会太麻烦。不过还是很痛的。。。
于 2011-03-12T07:07:01.243 回答
3
西蒙 - 我的经验是，这当然仍然是一个问题。
针对您的第二个问题，为什么不使用透明填充？（也许你还在支持ie6，这很重要，在这种情况下，我真的很抱歉）。
于 2011-03-22T05:38:53.093 回答
1
说到较旧的浏览器（使用文本缩放的浏览器），您并不总是需要填充。
您的两个示例之间的主要区别在于 Daily Show 精灵已经在图像本身中包含了菜单项的文本。
使用文本缩放时，由于字体较大，AOL 菜单项可能会垂直拉伸，菜单文本甚至可能会换行至两行。为了适应这种可能性，这些图标需要一点填充以确保它们不会流血。通常，您只需尝试确保它不会在 IE6 的五种文本大小中的任何一种上流血。
由于 The Daily Show 的菜单不包含任何（可见的）HTML 文本，它的大小不会受到文本缩放的影响（尽管您可能需要一个line-height: 0;左右来确定），所以它不需要任何填充。
正如sculiffe已经展示的那样，由于舍入错误，使用页面缩放的浏览器可能需要精灵有一点填充。
于 2009-03-27T23:12:26.050 回答