Dis*_*oat 6 css image css-sprites
通常如果我创建CSS精灵,我将它们排列在一起,没有任何间距.例如,如果所有图像都是10x10像素,我会将它们放在坐标0,10; 0,20; 10,10; 10,20.
但这似乎在某些情况下会引起问题.例如,在页面缩放期间和移动设备上,您可以看到下一个精灵的边缘.
为什么会出现此问题,是否与舍入错误有关？简单地在sprite周围添加间距是避免问题的最佳方法吗？如果是这样,精灵图像中的图标之间是否应该有最小或建议的间距？
由于舍入，缩放时可能会出现精灵出血，尤其是在 IE 中（旧版本只是舍入到最接近的整数，例如 的计算值20.343px将呈现为20px）。
由于舍入误差永远不会大于1px，因此通过在所有边上填充 ，1px您已经可以解决该问题。
现代浏览器使用一种称为子像素渲染的方法来缓解这个问题。