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顯然仍然會縮小比例，至少在肖像模式下。更不用說所有其他智能手機在那裏與更低劣的屏幕。