Firefox 和 Chrome 中不同的字体高度

Question

我想使用 jQuery 测量 html 元素的字体高度。

Here is a fiddle

//HTML
<h1 id="fonty">Size of font in pixels?</h1>

//CSS
#fonty {
    font-size: 8px;
    font-family: Arial;
}

//Javascript
var height = $("#fonty").height();
console.log(height);

该方法工作正常，但我在 Chrome 和 Firefox 中得到不同的结果。有没有办法在所有浏览器中获得正确/相同的字体大小。

Answer 1

字体的高度不仅通过 font-size 来衡量，还通过 font-size 和 line-height 以及 padding 值来衡量：

因此，不同的浏览器具有不同的默认值，例如 line-height 1px different in firefox and chrome，因此它们可能会有所不同。

您可以通过显式定义它们来计算它们。