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

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

Working Fiddle 在Firefox，Chrome，Safari中查看。

FontAwesome图标在Safari中比Chrome更高

3 个答案: