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

Sim*_*ver 21 css-sprites

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

我认为这取决于不同类型的浏览器缩放(最好由Jeff解释).

但是,我在测试中未能看到这种行为.这只是旧版浏览器的问题吗?(我目前无法使用IE6进行测试,因此我将其视为"旧").

我还要担心留空吗?这是一种痛苦.

例如 :

我找到的AOL的CSS Sprite在每个图像之间都有填充:VIEW

但The Daily Show决定不打扰:VIEW

scu*_*ffe 15

应该被填充,但是当缩放时,特别是在IE8中(比RC更多),如果没有填充,则会出现图像渗色.

最好的例子是去Google.com - >搜索,然后缩放......当缩放向上/向下舍入时,你会开始在图像的右下角看到"下划线".

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

这是来自谷歌的精灵(图片)......

替代文字

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

替代文字

  • 啊多么讽刺.我正在向后看OLDER浏览器,而且NEWER浏览器存在问题!谢谢你的截图 (2认同)

Sim*_*ver 5

基本上答案是肯定的。两年后我问这个问题的那一天将会看到 IE9 的发布。IE9 也有这个问题——如果不是比任何其他浏览器更多的话......

这非常令人气愤,因为修复它是如此简单。

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

我将不得不在每个图像周围放置一个像素边框以匹配相邻元素的背景颜色(每边可能不同)。幸运的是,我基于一个 .xml 文件自动生成了所有的 csssprites - 所以我可以通过编程方式来做到这一点,而不会太匆忙。不过还是很痛啊……

  • 截至今天,即 2014 年 2 月,该错误仍然存​​在于移动版 Safari 浏览器以及桌面版 Firefox(已确认到版本 27)中。匹配背景颜色是不必要的,最好在每个精灵周围使用 1-2 像素的全透明。此广告仅对文件大小影响很小,但适用于所有浏览器。 (2认同)