Html 在Safari中，图标比Chrome更高

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

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

在Safari中，如下所示：

现在，我使用基金会、ReaTc.js和FontAwesome，所以通过JSFiddle提供CSS证明非常麻烦。我试着尽我所能剥去皮肤，让它赤裸裸，我相信你仍然可以看到它在中国发生。只需在Safari和Chrome中查看它，您就会注意到偏移量

这里是JSFIDLE的布局图：

HTML:

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

---

编辑：垂直对齐在我的一端不起作用。

添加

垂直对齐

可修复此问题：

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

---

我想你可以通过定义

vertical align:middle

从

中删除
top
和
left
来实现这一点。命名
类并给出
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中检查。
我说的删除
位置：相对
？可能是我的大脑工作不正常。哈哈，对不起，伙计。
.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;
}