移动应用（iOS和Android）上的网络视图无法正确呈现图标

Question

我有一个定义了图标的字体，我看到移动设备上基于webkit的移动浏览器的行为不一致。

在网络上，悬停跨度会产生以下结果（注意图标正确填充了它的容器）：

在移动设备上，将云端悬停在以下位置（注意图标不正确地填满了它的容器 - 抛弃垂直对齐）：

除了仅使用SVG作为我的图标之外，我似乎无法找到解决此问题的方法。 This webkit bug标记为已解决且未获得解决但似乎并不乐观。

Answer 1

似乎对我有用的唯一解决方案是在跨度上设置以下内容：

display: inline-block;
height: 1px;