ipad错误地显示我的精灵图像(ipad showing my sprite images incorrectly)

ipad错误地显示我的精灵图像(ipad showing my sprite images incorrectly)

我想知道这是否有点简单，但我只在iPad上出现问题，并且出现了图像。 我有一个标签，我使用sprite来显示星号（类似于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!

最满意答案

这是因为iPad可以缩放页面。

缩放使用精灵的元素大小，缩放精灵图像。 但它似乎并不准确。

在Safari中缩小时会发生同样的情况。 这是因为图像在浏览器中不是以相同的方式缩放，而是dom元素。 一个dom元素被渲染为矢量对象。 因此，当您放大或缩小时，线条会保持清晰。 使用位图执行相同操作时。 它变得模糊，浏览器需要猜测图像看起来像小还是大。

你有两个选择：

在精灵之间使用更多的空间。 在CSS中使用EM而不是像素

PS：不要在你的CSS中使用！

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:

use more space between the sprites. use EMs and not Pixels in your CSS

PS: Don't use !important in your css