Safari渲染Fontawesome与透明填充

Question

我在我的项目中使用Font-awesome，并且每个图标都在行中间对齐。在Chrome浏览器，Firefox和IE浏览器中，它们相互对齐，但在Safari上，图标会减少3或4个像素。

我检查图标，并在每个浏览器中，他们渲染和占据他们应该的确切空间。但在Safari中，它们以额外的顶部尺寸渲染，图标顶部为透明填充。这不是垂直对齐或行高问题，角色本身顶部有这个“透明填充”。

这种感觉很愚蠢，但是在一个巨大的项目中，每个图标都对齐3/4px比应该给我很多头痛。

Answer 1

一个可能的原因是，您在不同的浏览器中有不同的默认行高。尝试明确设置这个，看看它是否有差别：

CSS取决于你的造型细节

i{ 
line-height:20px; 
} 

甚至

i{ 
display:inline-block; 
} 

，你可能还需要设置i标签上的一个类，例如

i.icon-class{ ....} 

祝你好运！