Question

通常如果我创建CSS精灵，我将它们排列在一起，没有任何间距。例如，如果所有图像都是10x10像素，我会将它们放在坐标0,10; 0,20; 10,10; 10,20。

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

为什么会出现此问题，是否与舍入错误有关？简单地在sprite周围添加间距是避免问题的最佳方法吗？如果是这样，精灵图像中的图标之间是否应该有最小或建议的间距？

Answer 1

由于四舍五入，缩放时可能会出现Sprite Bleeding，尤其是在IE中（旧版本只是舍入到最接近的整数，例如20.343px的计算值将呈现为20px）。
由于舍入误差永远不会大于1px，因此所有方面的填充均为1px，您可以解决该问题。

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

Answer 2

维护存储在50px x 50px或100px x 100px盒子中的CSS精灵会更容易。

它有助于在精灵中组织相关图像。
您可以复制粘贴以前的样式，只更改一个数字以换新样式。
您无需手动手动找到完美的像素位置。
它还可以避免出现问题的情况，有时候，你无法控制html元素的宽度/高度，并且它会显示精灵图像的其他非预期部分。

例如：

div.test {
    background-image: url(image.png);
    background-position: 100px 0px;
}
div.test:hover {
    background-position: 100px 100px; /* Simple relation with previous style */
}

div.box1 {
    background-image: url(image.png);
    background-position: 200px 0px;
}
div.box2 {
    background-image: url(image.png);
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */
}

CSS精灵之间是否有建议的间距？

2 个答案: