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

我认为您可以通过定义 vertical-align: middle 来实现。

Answer 3

从 .name class 中删除 top 和 left 并提供 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;
}

Working Fiddle 已在 Firefox、Chrome、Safari 中检查。

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

FontAwesome icons are higher up in Safari than Chrome

html

css

google-chrome

safari

font-awesome