我在我的项目中使用Font-awesome,并且每个图标都在行的中间对齐。在Chrome,Firefox和IE上,它们是正确对齐的,但在Safari上,图标会下降3或4像素。
我检查图标,在每个浏览器中,它们都是渲染的,并且应该是它们应该具有的确切空间。但在Safari中,它们使用额外的顶部大小进行渲染,图标顶部有透明填充。它不是垂直对齐或线高问题,角色本身就有这种透明填充"在上面。
这看起来很愚蠢,但在一个巨大的项目中,每个图标都比3/4px低,应该让我头疼。
答案 0 :(得分:1)
一个可能的原因是您在不同的浏览器中有不同的默认行高。尝试明确设置它以查看它是否有所作为:
<强> CSS 强>
i{
line-height:20px;
}
甚至
i{
display:inline-block;
}
根据样式的具体情况,您可能还需要在i标记上设置一个类,例如
i.icon-class{ ....}
祝你好运!