移动应用程序（iOS 和 Android）上的 Webview 无法正确呈现图标

Question

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

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

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

除了使用 SVG 作为我的图标之外，我似乎找不到解决这个问题的方法。 This webkit bug 标记为已解决且不会修复似乎没有希望。

Answer 1

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

display: inline-block;
height: 1px;