iPhone上的CSS精灵出现问题

Question

我注意到在iPhone上查看时，CSS精灵似乎比它们应该显示的多了1个像素。我的网站在Mac和PC上的所有主要桌面浏览器上都可以正常工作。但是当我在iPhone上查看它时，您可以看到相邻精灵图像的1个像素。

有人遇到过这种情况吗？有没有建议如何干净地解决这个问题？我知道我可以修改所有精灵之间的间隔以获得更好的效果，但是否有更简单的方法？

更新：使用Safari缩放进行测试后，发现在某些缩放级别上，在桌面Safari上也会出现完全相同的问题。

- Kyle

---

你能展示一下截图吗？这似乎与精灵图没有太大关系，而是因为包含元素过大了1像素，是吗？ - Pekka

@pekka 是的，看起来元素太大了。 - Kyle

我也注意到了这个问题。但是我在一段时间后放弃了尝试，因为无法找出原因。 - lewiguez

Answer 1

比不做好，总比晚一点做好：

这并不是一个错误或软件缺陷，而是简单的数学问题：（较旧的）iPhone在320像素宽的屏幕上（纵向模式下），将网站显示为980像素宽。

因此，这是一个四舍五入的问题：假设一个元素宽度为50像素。它以大约三分之一的大小显示，这就导致了问题：iPhone将以16像素或17像素的宽度显示它。即使它恰好是三分之一，问题仍然存在，并且在各种缩放级别下也是如此。

如果是16像素，那么没问题-您可能已经注意到该问题并未发生在所有元素上。如果是17像素，则意味着该元素显示略大于预期，并且相邻的精灵图表将会显示出来。

我在iPhone 3G上检查了apple.om，甚至他们的导航栏底部也显示了一些奇怪的小工件-它们几乎不可察觉。

因此，理论上应该在每个精灵图表周围添加1像素即可解决问题。不得不改变所有这些元素确实很糟糕，但似乎这是最好的解决方案。问题也不太可能消失- iPhone 4显然仍会缩小东西，至少在纵向模式下。更不用说其他屏幕远远不如iPhone的智能手机了。

- Micha

Answer 2

在图标之间再增加1像素的间距。

.:编辑:.

刚刚注意到这是你提出的解决方案之一。检查具有精灵的元素，并确保它们的大小正确。（在Firebug中双重检查渲染的边框盒模型）。

这可能与移动电话如何呈现项目有关。

- Josh K