IE与Firefox的行高

Question

我有一个H1，它有一个定义的字体大小和行高，零填充和边距。但是，IE中的结果在文本开始之前在顶部有一个额外的填充像素，即使该元素仍占用相同的垂直空间。

跨浏览器呈现行高的方式是否存在不一致？

样式：

h1, h1 a { font-size:32px; line-height:44px; margin:0px;padding:0px;border:0px;}

---

感谢

Answer 1

您尚未为H1元素设置高度，渲染元素的高度取决于要渲染的文本。

在FF中，没有设置高度，两个不同的H1被渲染为不同的高度，40对44像素，由于不同的角色高度，在设置高度后，两个元素都按预期呈现。 （FF与IE文本渲染器的差异会解释您发现的差异。）

line-height属性仅确定文本在围绕字体高度的名义框内垂直放置的位置。 （包括上升（f）和下降（q））。

强制height＆amp; line-height同样使浏览器可以将文本框放在同一位置，无论文本内容如何。

h1, h1 a { 
    font-size:32px; 
    line-height:44px;
    height:44px;       /* ++ */
    margin:0px;
    padding:0px;
    border:0px;
}

Answer 2

这也可能是vertical metrics问题。如果字体本身具有较差的vartical指标，它将永远不会正确对齐。在浏览器中一致地呈现字体的唯一方法是修复其垂直度量标准。

大多数字体提供商允许您在下载之前更新和修复字体的垂直指标。他们可能会以不同方式调用该选项。例如：Fontsquirrel称之为Auto-Adjust Vertical Metrics，myFonts.com称之为Line Height Adjustments。

更多相关内容：Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?