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

Question

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

我尝试了其他一些建议而没有明显变化：

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

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

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

你会发现它只是一个垂直对齐问题。图标都水平放置在正确的位置。单击图标时，活动状态（橙色为白色）不会移动，但仍然会被切断。这不是一个规模问题。

我认为<span>元素实际上被某种东西推倒了。

有什么想法吗？

预览：

Answer 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;
}