FontAwesome 图标在 Safari 中的位置高于 Chrome

Question

我不知道为什么会发生这种情况，但我的 FontAwesome 图标在 Safari 中出现偏移。

在 Chrome 中它们看起来像这样：

在 Safari 中，像这样：

现在，我正在使用 Foundation、React.js 和 FontAwesome，因此通过 JSFiddle 提供 CSS 被证明非常麻烦。我尝试尽可能多地剥离并使其成为准系统，我相信您仍然可以在这个 JSFiddle中看到它发生。只需在 Safari 中查看，然后在 Chrome 中查看，您应该会注意到一个偏移。

这是 JSFiddle 的布局：

HTML：

<div class="line">
  <i class="fa fa-cog"></i>
  <span class="name" >cfb</span>
</div>

CSS：

<div class="line">
  <i class="fa fa-cog"></i>
  <span class="name" >cfb</span>
</div>

我不知道如何解决这个问题并且非常困惑。

编辑：垂直对齐对我来说不起作用。

Answer 1

添加vertical-align修复它：

.fa {
    position: relative;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle; /* Or try bottom or baseline */
}