html - 移动应用程序(iOS 和 Android)上的 Webview 无法正确呈现图标

Question

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

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

在移动设备上，将鼠标悬停在 span 上会出现以下内容(请注意图标不正确地填充了它的容器 - 放弃了垂直对齐):

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

Answer 1

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

display: inline-block;
height: 1px;