CSS Sprites 的 iPad/iPhone 问题，定位不正确

Posted 2023-03-12

【中文标题】CSS Sprites 的 iPad/iPhone 问题，定位不正确

【英文标题】：iPad/iPhone issue with CSS Sprites, incorrect positioning

【发布时间】：2014-05-09 20:49:09

【问题描述】：

我在我们网站中用于侧边栏小部件的 CSS 精灵遇到了问题。在装有 ios 7.1 的 iPad 上，所有精灵都被推得太远了。

我尝试了其他几个没有明显变化的建议：

指定背景大小以防止缩放（不是缩放问题） 使用background-clip 和-webkit-background-clip 剪辑到填充框 将视口设置为minimum-scale=1.0, maximum-scale=1.0，以及初始缩放、禁用用户缩放等。

您可以在以下网站上看到图标：

http://eugenedining.com/featured-restaurants/

您会注意到这只是垂直对齐问题。图标都在水平的正确位置。当您单击一个图标时，活动状态（橙色上的白色）不会改变，尽管它仍然被切断。这不是尺寸问题。

我认为<span> 元素实际上是被什么东西推倒了。

有什么想法吗？

预览：

【参考方案1】：

所以我猜<a> 和嵌套的<span> 元素之前出现了某种神秘的填充/换行问题。

将跨度切换到绝对定位已经解决了这个问题，但我仍然不知道额外空间是从哪里来的。

幸运的是，我的大部分结构都是针对 <a> 元素完成的，因此实现起来非常简单。

.tag-list li.tag-item a 
  position: relative;

.tag-list li.tag-item a span 
  position: absolute;
  top: 0px;
  left: 0px;