ipad错误地显示我的精灵图像

Mun*_*lla 4 css safari css-sprites mobile-safari ipad

我想知道这是否有点简单,但我只是在iPad上出现问题我的sprited图像.我有一个标签,我用一个精灵来显示一个星形图像(类似于gmail或picasa)来表示一个喜欢的.在计算机上的每个其他浏览器(包括safari)上,一切都很好.

问题出在iPad上,它显示的精灵数量超出应有的水平,看起来很奇怪.更奇怪的是,这个图像重复了几次,似乎并不一致.

这是专门针对iPad的某种缩放问题或视口设置问题吗?它让我发疯,而我所做的任何修复工作都会切断部分图像并破坏浏览器的正常外观.

这是我的意思的一个例子,因为我无法提出我目前正在处理的页面.在我过去曾经工作过的网站上,iPad上的查看选项看起来很奇怪:http://demo.qlikview.com/index.aspx? section = Life 例如,"下载"查看选项在FEMA应用程序比在Kick It应用程序上所以它甚至看起来不一致.

这是一个截图

任何帮助,将不胜感激.谢谢!

meo*_*meo 6

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

使用精灵的元素大小是缩放的,精灵图像是.但似乎没有表现得恰到好处.

当你缩小徒步旅行时会发生同样的事情.这是因为图像在浏览器中不是以相同的方式缩放,而是dom元素.dom元素呈现为矢量对象.因此,当您放大或缩小时,线条会保持清晰.使用位图执行相同操作时.它变得模糊,浏览器需要猜测图像看起来更小或更大.

您有两种选择:

  1. 在精灵之间使用更多空间.
  2. 在CSS中使用EM而不是像素

PS:不要在你的CSS中使用!important

  • `!important`语句在适当使用时将它放在css中.盲目地指示某人不使用它是不负责任的. (4认同)