FirefoxとChromeの計算された高さの差

Question

Googleフォントのカスタムフォントを使用するテキストを持つdivがあります。フォントサイズはピクセルで定義され、行の高さが定義されます。ある場合のFirefoxでブロックの高さは、Chromeで、それは472

http://jsbin.com/wezasekafo/1/edit?html,css,output

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    font-family: "Roboto"; 
 
    font-size: 35px; 
 
    width: 500px; 
 
    line-height: 1.7; 
 
    border: 1px solid; 
 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 

 

 
<div> 
 
    Lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, 
 
    lines of text, lines of text 
 

 
</div>

私はそこに何が起こっているかを理解しようとしていている間、476となるように計算されますそれに対処する方法。 -

Answer 1

実行クローム& Firefoxで以下のスニペットあなたに、1行のテキストの高さ（マイナス国境から2ピクセルの貢献を）取得します：

1. クローム：59

2. のFirefox：59.5

var height = document.querySelectorAll('body > div')[0].clientHeight; 
 
console.log(height);

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    font-family: "Roboto"; 
 
    font-size: 35px; 
 
    width: 500px; 
 
    line-height: 1.7; 
 
    border: 1px solid; 
 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 

 
<div> 
 
    Lines of text 
 
</div>

注：

35px x 1.7 = 59.5px

：また、JavaScriptのレポートと何を要素

理論的line heightを検査したときに表示が何であるかの違いを見ます

問題のデモには8行があるため、

1. クローム：59px x 8 = 472px

2. のFirefox：59.5px x 8 = 476px

有名サブピクセル問題これが発生 - ブラウザが分数ピクセルを処理する方法は、 - 別の例in this SO threadを参照。