FontAwesome 图标在 Safari 中的位置高于 Chrome
FontAwesome icons are higher up in Safari than Chrome
我不知道为什么会这样,但我的 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;
}
我不知道如何解决这个问题,我很困惑。
编辑:垂直对齐对我不起作用。
添加 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 */
}
我认为您可以通过定义 vertical-align: middle
来实现。
从 .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 它们看起来像这样:
在 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;
}
我不知道如何解决这个问题,我很困惑。
编辑:垂直对齐对我不起作用。
添加 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 */
}
我认为您可以通过定义 vertical-align: middle
来实现。
从 .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 中检查。