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

pkln4tw6 于 2023-10-21 发布在其他

关注(0)|答案(4)|浏览(116)

我不知道为什么会发生这种情况，但我的FontAwesome图标在Safari中出现偏移。
在Chrome中，它们看起来像这样：

在Safari中，像这样：

现在，我正在使用Foundation，React.js和FontAwesome，所以通过JSFiddle提供CSS非常麻烦。我试着尽我所能地剥离它，使它成为最基本的，我相信你仍然可以在this JSFiddle中看到它。只要看看它在Safari浏览器，然后在Chrome，你应该注意到一个偏移。
下面是JSFiddle在这里列出：
超文本标记语言：

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

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

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

css

来源：https://stackoverflow.com/questions/35099990/fontawesome-icons-are-higher-up-in-safari-than-chrome

4条答案

按热度按时间

js5cn81o1#

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

赞(0）回复(0）举报 2023-10-21

j91ykkif2#

在我的情况下，这是一个行高的问题。设置line-height: inherit为我的FontAwesome图标轻推它回到一个垂直居中的位置。这似乎不会影响其他浏览器中的渲染，但它修复了Safari中的定位问题。

赞(0）回复(0）举报 2023-10-21

j8ag8udp3#

从.name类中删除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中运行。

赞(0）回复(0）举报 2023-10-21

sqxo8psd4#

我认为你可以通过定义vertical-align: middle来实现这一点。

赞(0）回复(0）举报 2023-10-21