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

我做了一个简单的例子，并尝试获取字符串的高度。不同浏览器之间的文本高度

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，但它的值仍然不一样。

例如：（苹果机）
在我的例子，Chrome是27，火狐为28，Opera是25，和Safari是27

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

来源

2013-02-19 Sam

在Chrome/Firefox（Linux）中，它同等28.是否不需要使用可能采用不同默认值的“line-height”？尝试设置它。 – marekful 2013-02-19 10:03:44

您需要添加'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);

}）;

来源

2013-02-19 10:14:16

谢谢。我试图使用行高，但我忘了它只适用于块元素。 – Sam 2013-02-19 13:00:55

要达到同样的高度上所有的浏览器，你需要考虑两件事情：

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

代码是这样：

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

Updated fiddle。

在Chrome和Firefox上都显示32。

来源

2013-02-19 10:06:00

谢谢。解决方案看起来很酷！但我想让用户选择font-family，所以它可能不是等宽字体... – Sam 2013-02-19 12:56:25

对不起，在这种情况下，我担心你必须设置固定的高度，如其他答案中所述。 – 2013-02-19 13:02:09

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

回答

相关问题