通常,如果我创建CSS Sprite,我会将它们全部排成一行,彼此之间完全没有间距。例如,如果所有图像均为10x10像素,则将它们放置在0,10坐标处;否则,将它们放置在0,10坐标处。 0,20; 10,10; 10,20。

但这在某些情况下似乎会引起问题。例如,在页面缩放和移动设备上,您可以看到下一个 Sprite 的边缘。

为什么会出现此问题,这与舍入错误有关?只是在子画面周围增加间距是避免该问题的最佳方法吗?如果是这样,则 Sprite 图像中的图标之间应该有最小或建议的间距吗?

最佳答案

Sprite出血可能会由于舍入而在缩放时发生,尤其是在IE中(旧版本仅舍入到最接近的整数,例如,计算出的20.343px的值将呈现为20px)。
由于舍入错误永远不会超过1px,在所有方面都填充1px,您已经可以解决该问题。

现代浏览器使用一种称为子像素渲染的方法来缓解此问题。

10-05 20:37
查看更多