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

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

请参阅此处的示例：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

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

使用monospaced font例如“索拉”。
使用固定大小的字体单位：分数。

代码如下：

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

Updated fiddle

在Chrome和Firefox上均显示32位。

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

2 个答案: