FontAwesome 图标在 Safari 中的位置比 Chrome 中更高

Question

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

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

在 Safari 中，像这样：

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

这里是 JSFiddle：

HTML：

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

CSS：

.line {
    color: #60b0c6;
    text-transform: capitalize; 
}

.name {
    font-size: 13px;
    cursor: pointer;
    width: 93%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    position: relative;
    top: 6px;
    left: 2px; 
}

.fa-cog {
    font-size: 12px;
    margin-right: 4px;
    opacity: 1;
    cursor: pointer;
    color: #333; 
}

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

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

编辑：垂直对齐在我这边不起作用。

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 */
}

Answer 2

在我的情况下，这是一个行高问题。为我的 FontAwesome 图标设置

line-height: inherit

会将其推回垂直居中位置。这似乎不会影响其他浏览器中的渲染，但它修复了 Safari 中的定位问题。

Answer 3

从

top

类中删除

left

和

.name

并给予

vertical-align

就可以了。

这里我用

vertical-align:top;

.name {
    font-size: 13px;
    cursor: pointer;
    width: 93%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    position: relative;
    vertical-align:top; //Here.
}

.fa {
    position: relative;
    display: inline-block;
    vertical-align:top; // Here
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

工作小提琴已在 Firefox、Chrome、Safari 中检查。

Answer 4

我认为你可以通过定义

vertical-align: middle

来实现这一点。