javascript - 不同浏览器之间的文本高度

Question

我做了一个简单的例子并尝试获取字符串的高度。

jQuery(function () {
    var jqSpan = $('span');
    jqSpan.css({
        'font-family': 'Arial',
        'font-size': '24px',
        'font-weight': 'bold'
    });
    $('#result').text(jqSpan[0].offsetHeight);
});

http://jsfiddle.net/DCBP9/1/

我发现不同浏览器之间的值不同。我使用了reset.css，但它的值仍然不一样。

例如：（Mac）
在我的例子中，Chrome 是 27，Firefox 是 28，Opera 是 25，Safari 是 27

我知道每个浏览器都有自己的渲染引擎，但我想知道是否可以让它们相同。

Answer 1

您需要添加“行高”属性。但问题是您需要将其设置为块项目。在这种情况下，您将始终获得相同的高度。

请参阅此处的示例：http: //jsfiddle.net/dDat4/2/

jQuery(function () {
var jqSpan = $('p');
jqSpan.css({
    'font-family': 'Arial',
    'font-size': '24px',
    'font-weight': 'bold',
    'line-height': '28px'
});
$('#result').text(jqSpan[0].offsetHeight);

});

Answer 2

要在所有浏览器上达到相同的高度，您需要考虑两件事：

1. 使用等宽字体，例如“Consolas”。
2. 使用固定大小的字体单位：点。

代码如下所示：

jqSpan.css({
    'font-family': 'Consolas',
    'font-size': '20pt',
    'font-weight': 'bold'
});

更新了小提琴。

在 Chrome 和 Firefox 上均显示 32。