Question

我在我的项目中使用Font-awesome，并且每个图标都在行的中间对齐。在Chrome，Firefox和IE上，它们是正确对齐的，但在Safari上，图标会下降3或4像素。

我检查图标，在每个浏览器中，它们都是渲染的，并且应该是它们应该具有的确切空间。但在Safari中，它们使用额外的顶部大小进行渲染，图标顶部有透明填充。它不是垂直对齐或线高问题，角色本身就有这种透明填充＆＃34;在上面。

这看起来很愚蠢，但在一个巨大的项目中，每个图标都比3/4px低，应该让我头疼。

Answer 1

一个可能的原因是您在不同的浏览器中有不同的默认行高。尝试明确设置它以查看它是否有所作为：

<强> CSS

i{
line-height:20px;
}

甚至

i{
display:inline-block;
}

根据样式的具体情况，您可能还需要在i标记上设置一个类，例如

i.icon-class{ ....}

祝你好运！