ipad显示我的精灵图像不正确

我想知道这是否有点简单，但我有一个问题，只有在我的萌芽图像的iPad上。我有一个标签，我使用sprite来显示星号（类似于Gmail或Picasa）的图像以指示最爱。在电脑上的所有其他浏览器（包括Safari）上，都是完全正常的。ipad显示我的精灵图像不正确

问题出在iPad上，它显示了更多的精灵比它应该和它看起来很奇怪。更奇怪的是，这张图片重复了好几次，似乎并不一致。

这是专门针对iPad的某种缩放问题或视口设置问题吗？这让我疯狂，而我所做的任何修复它的东西都会切断一些图像，并破坏正常的浏览器外观。

下面是我的意思，因为我不能摆出我目前正在处理的页面的一个例子。在这个网站上，我已经在过去的工作，在iPad上的观看选项看起来很奇怪： http://demo.qlikview.com/index.aspx?section=Life 例如，“下载”查看选项看起来不同在FEMA应用比在踢它的应用程序，因此它不甚至似乎是一致的。

here's a screenshot

任何帮助，将不胜感激。谢谢！

来源

2011-04-03 Munzilla

除非这是某人已知的问题，否则我怀疑您需要提供某种代码或测试用例。 – thirtydot 2011-04-03 01:49:35

我不认为他需要显示一些代码。这是一个浏览器缩放问题。 – meo 2011-04-03 11:57:48

这是因为iPad会缩放您的页面。

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

当您在safari中缩小时会发生同样的情况。这是因为图像在浏览器中的缩放方式与dom元素不同。一个dom元素被渲染为矢量对象。所以当你放大或缩小时，线条保持锐利。当你对位图做同样的事情时。它变得模糊，浏览器需要猜测图像看起来像小还是大。

你有两个选择：

使用精灵之间更多的空间。
使用EMS，而不是像素

PS：不要使用重要的在CSS

来源

2011-04-03 11:57:13 meo

伟大的洞察力，谢谢。为什么会特别使用EMs？ – Munzilla 2011-04-03 12:06:35

，因为safari接缝可以更好地处理EM的尺寸调整。你可以尝试以百分比的方式指定CSS3背景大小。这可能有助于。 – meo 2011-04-03 12:08:47

'！important'语句在恰当使用时会将它放在css中。盲目指导别人不要使用它是不负责任的。 – 2013-04-12 10:39:25

这个最简单的解决方法是把大纲在你尽管与边框的颜色！与父容器的背景颜色相同。大纲在你的元素之外，不影响布局。你看到的是移动Webkit在缩小图像背景颜色或背景图像时遇到的问题，它们会从容器中流失。纲要将放在上面并覆盖它。

来源

2011-06-12 20:30:26 Robert

像meo指出的，最好的选择是之间的精灵之间的离开空间。

还有一件事是你可以做的，那就是不要让用户通过在你的标签中加入下面一行来放大网页。它看起来与您在浏览器中查看完全一样，如果因为精灵问题而导致iPad中的元素大量混乱，那么它会非常整齐。

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />

祝你好运！

来源

2011-07-06 15:53:35 blackpla9ue

+1之间的精灵之间的离开空间，这个问题已经在其他浏览器中突然出现*咳嗽* IE *咳嗽* – scunliffe 2012-06-20 18:06:49

我通常所做的只是为iPad用户定义单独的图像（非sprited）。我知道它没有像你希望的那样快速加载图像，但我觉得这是他们必须付出的代价。我所做的是在服务器上使用@media在您的样式表中为单独的图像定义iPad浏览器的不同图像。如何使用@media iPad的快速回顾，可以发现：

http://css-tricks.com/snippets/css/ipad-specific-css/

来源

2012-02-18 04:38:35 hypnoseal

我只是碰到了这个问题为好。自从我第一次注意到iPad的不完美之后，我在我的精灵之间留下了更多的空间。但是，我目前的项目涉及使用CSS3转换的另一个元素和。这种组合使得精灵模糊不清，边缘奇怪的裁剪。我实际上在No more jagged edges in iOS找到了一个修复程序。尝试采用以下CSS到你的精灵：

/* IOS fix for incorrectly scaled sprites */ 
-webkit-background-clip:padding-box; 
background-clip:padding-box;

那些几行字在我的项目工作的法宝。当然，YMMV。

来源

2012-11-30 07:20:24 thirdender

此外，页面[CSS3动画：打嗝和错误，你会想避免]（http：///webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hcucups-and-bugs-youll-want-to-avoid/）有许多其他有用的iOS修复CSS3转换。 – thirdender 2012-11-30 07:21:30

ipad显示我的精灵图像不正确

回答

相关问题