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{ ....} 

祝你好運！