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

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

请参阅此处示例: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);

});