Css IE与Firefox中的线条高度

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

在不同浏览器中呈现线条高度的方式是否不一致

风格：

---

---

感谢您没有为

H1

元素设置高度，渲染元素的高度取决于正在渲染的文本

在FF中，在没有设置高度的情况下，由于不同的字符高度，两个不同的

H1

以不同的高度渲染，分别为40和44像素，在设置高度后，两个元素都按预期渲染。（FF与IE文本渲染器的差异将解释您发现的差异。）

行高

属性将仅确定文本在围绕字体高度的概念框内的垂直位置。（包括上升（f）和下降（q））

强制

高度

和

行高度

相同可使浏览器将文本框放置在相同位置，而不管文本内容如何

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

---

这也可能是一个垂直度量问题。如果字体本身的变量度量很差，它将永远不会正确对齐。使字体在浏览器中一致呈现的唯一方法是修复其垂直度量

大多数字体提供程序允许您在下载字体之前更新和修复字体的垂直度量。不过，他们可能会用不同的方式来称呼这一选项。例如：Fontsquirrel将其称为

自动调整垂直度量

，myFonts.com将其称为

行高调整

---

更多信息：

谢谢garrow-问题是H1需要包装到多行上，如果需要，我无法在其上设置明确的高度。doh！你可能不得不求助于浏览器定位来实现这一点。

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