iPad显示了我的精灵图像错误
我想知道这是否有些简单，但我仅在 iPad 上处理精灵图像时遇到问题。我有一个标签，我使用精灵来显示星星图像（类似于 gmail 或 picasa）以指示我的最爱。在计算机上的所有其他浏览器（包括 safari）上，一切都很好。
问题出在 iPad 上，它显示的精灵比应有的多，而且看起来很奇怪。更奇怪的是，这个图像重复了好几次，而且似乎并不一致。
这是专门针对 iPad 的某种缩放问题或视口设置问题吗？这让我发疯，我所做的任何修复都会切断一些图像并破坏正常的浏览器外观。
这是我的意思的一个例子，因为我无法发布我当前正在处理的页面。 在我过去工作过的这个网站上，查看选项在 iPad 上看起来很奇怪： http://demo.qlikview.com/index.aspx?section=Life 例如，“下载”查看选项在 FEMA 应用程序上与 Kick It 应用程序上看起来不同，因此甚至看起来不一致。
如有任何帮助，我们将不胜感激。 谢谢！
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这是因为 iPad 会缩放您的页面。
使用精灵的元素的大小和精灵图像都会缩放。但它的行为似乎并不精确。
当你在 Safari 中缩小时，也会发生同样的事情。这是因为图像在浏览器中的缩放方式与 dom 元素不同。 dom 元素被渲染为矢量对象。因此，当您放大或缩小时，线条保持清晰。当您对位图执行相同操作时。它变得模糊，浏览器需要猜测图像看起来会如何变小或变大。
您有两个选择：
PS：不要在 css 中使用 !important
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
PS: Don't use !important in your css
就像 meo 指出的那样，最好的选择是在精灵之间留出空间。
您还可以做最后一件事，即通过在标记中添加以下行来不让用户缩放网页。它看起来和你在浏览器中看到的一模一样，如果你在 iPad 上有大量元素因为精灵问题而混乱，那么这会非常整洁。
祝你好运！
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
Good luck!
最简单的解决方法是在你的恶意周围放置一个轮廓，边框颜色与父容器的背景颜色相同。轮廓位于元素之外，不会影响布局。您看到的是移动 Webkit 遇到的一个问题，当它缩小带有背景颜色的图像或背景图像时，它们会从容器中溢出。轮廓将位于其之上并覆盖它。
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
我通常做的只是为 iPad 用户定义单独的图像（非精灵）。我知道它的加载速度没有您希望的精灵图像快，但我觉得这是他们必须付出的代价。我所做的就是在服务器上放置单独的图像，并在样式表中使用 @media 来为 iPad 浏览器定义不同的图像。有关如何在 iPad 上使用 @media 的快速回顾，请访问：
http: //css-tricks.com/snippets/css/ipad-specific-css/
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with @media in your stylesheet to define different images for iPad browsers. A quick review of how to use @media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
我刚刚也遇到了这个问题。自从我第一次注意到 iPad 的缺陷以来，我一直在精灵之间留出额外的空间。然而，我当前的项目涉及精灵和另一个具有 CSS3 转换的元素。这种组合使精灵变得模糊，边缘出现奇怪的剪裁。我实际上在 iOS 中不再出现锯齿状边缘。尝试将以下 CSS 应用于您的精灵：
这几行代码在我的项目中发挥了神奇作用。当然，YMMV。
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
Those few lines worked magic in my project. Of course, YMMV.