CSS精灵搞砸了iphone

Question

我注意到css精灵似乎比在iphone上观看它们时显示的像素多1个。我的网站在Mac和PC上的所有主要桌面浏览器上运行良好。但是当我在iphone上查看它时，你可以看到相邻精灵图像的1个像素。

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

更新：使用safari测试缩放，并注意到在桌面游戏中某些缩放级别出现完全相同的问题

Answer 1

迟到总比没有好：

这不是一个错误或软件缺陷，它是简单的数学：（较旧的）iPhone在320px宽的屏幕上（纵向模式）显示宽度为980px的网站。

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

如果它是16px，你很好 - 你可能已经注意到你的所有元素都没有出现这个问题。如果它是17px，则表示元素显示的位置略大于预期，并且相邻的精灵将显示。

我在iPhone 3G上检查了apple.om，甚至他们的导航条在底部显示了一些奇怪的小文物 - 它们几乎没有引人注意。

所以从理论上讲，每个精灵周围添加1px应该足够了。必须改变所有这些元素是一个无赖，但它似乎是最好的解决方案。这个问题也不太可能消失 - iPhone 4显然仍然会降低成本，至少在纵向模式下。更不用说所有其他智能手机的屏幕都差一点了。

Answer 2

在图标之间添加另外1个像素的空间。

：编辑：

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

这可能与手机如何呈现物品有关。