不同瀏覽器之間的文本高度

我做了一個簡單的例子，並嘗試獲取字符串的高度。不同瀏覽器之間的文本高度

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

不同瀏覽器之間的文本高度

回答

相關問題