代码之家 › 专栏 › 技术社区 › David

FontAwesome图标在Safari中比Chrome更高

font-awesome safari google-chrome css html

David · 技术社区 · 9 年前

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

在Chrome中,它们看起来是这样的:

在Safari中,像这样:

现在,我正在使用基金会,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; 
}

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

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

3 回复 | 直到 9 年前

Praveen Kumar Purushothaman 9 年前

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

-1

ketan 9 年前

去除 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。

-1

Peyman Mohamadpour 9 年前

我认为你可以通过定义 vertical-align: middle .

推荐文章

Aaron · IdentityServer4和运行在iOS 9.3.5上的客户端(禁用JavaScript)

7 年前

thank_K · 检测safari并停止脚本

7 年前

mattaningram · 在Safari中,框阴影颜色函数中的CSS自定义属性渲染不正确

7 年前

Dockson · iOS Safari 11.3上navigator中没有服务人员

7 年前

Emrah Åentürk · pc和移动设备之间的角度5日期时区差异

7 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

7 年前

Archna Rangrej · 如何在Safari中录制HTML5视频?

7 年前

akash · 我的html背景视频未在safari中播放

7 年前

DsXack · 如何在iOS和macOS上使用Safari中的网络摄像头录制视频?

7 年前

Charlie McShane · Flex Wrap+TransformY在Safari中不起作用

7 年前