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

Question

我在我们网站的侧边栏小部件中使用 CSS sprites 时遇到了问题。在装有 iOS 7.1 的 iPad 上， Sprite 都被压得太低了。

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

1. 指定背景大小以防止缩放(不是缩放问题)
2. 使用 background-clip和 -webkit-background-clip夹到填充框
3. 将视口(viewport)设置为 minimum-scale=1.0, maximum-scale=1.0 ，以及初始缩放、禁用用户缩放等。

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

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

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

我认为 <span>元素实际上被某些东西压低了。

有什么想法吗？

预览:

Answer 1

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

将 span 切换为绝对定位解决了这个问题，但我仍然不知道额外的空间从何而来。

幸运的是，我的大部分结构都是针对 <a> 完成的元素，所以这很容易实现。

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