CSS精灵混淆了iPhone

Question

我注意到css精灵似乎显示比他们在iphone上查看时多1个像素。我的网站在Mac和PC上的所有主流桌面浏览器上都能很好地工作。但是当我在iphone上查看它时，您可以看到相邻精灵图像的1个像素。

以前有人遇到过这个吗？有关如何彻底解决此问题的任何建议？我知道我可以修改我所有的精灵以在它们之间有更多的分离，但有没有更简单的方法？

UPDATE：测试了Safari浏览器缩放，并注意到出现相同问题在桌面上的Safari

Answer 1

特定缩放级别添加图标之间的空间，另一个1px的。

。：edit :.

只要注意到这是您提出的解决方案之一。用精灵检查元素，并确保它们的尺寸合适。 （仔细检查Firebug中渲染的边框模型）。

它可能与手机呈现物品的方式有关。

Answer 2

末知足者常乐从未：

这是不是一个错误或软件缺陷，这是简单的数学计算：在（旧的）iPhone显示的屏幕是320像素宽（在人像模式）在980px宽的网站。

所以这是一个四舍五入的问题：让我们说一个元素是50px宽。它显示的大小约为其三分之一，这就是问题所在：iPhone会以16px或17px的宽度显示它。即使它只有三分之一，问题仍会存在，当然，这同样适用于各种缩放级别。

如果它是16px，那么很好 - 你可能已经注意到这个问题不会发生在你的所有元素上。如果它是17px，则意味着该元素显示的比想要的略大，并且相邻的精灵将显示。

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

所以在理论上，应该足以在每个精灵周围添加1px。不得不改变所有这些元素是一件令人失望的事情，但它似乎是最好的解决方案。问题不大可能消失 - iPhone 4显然仍然会缩小比例，至少在肖像模式下。更不用说所有其他智能手机在那里与更低劣的屏幕。