FirefoxとChromeでのHTMLのレンダリング

Question

<div style="float: left; 
      height: 20%; 
      width: 70%;"</div> 
<div style="float: right; 
      height: 20%; 
      width: 30%;">   </div> 

Chromeでは、2つの部門が同じ行にあります。しかし、2つの部門間には小さなギャップがあります。しかし、Firefoxではギャップがありません。なぜこうなった？これに対する解決策はありますか？

Answer 1

クロムはすべての幅を整数ピクセルに丸めます。コンテナの幅が10で割り切れる場合を除き、実際には30と70パーセントではないので、浮動小数点の幅は丸められ、結果としてそれらの間にスペースができることを意味します。

Geckoは分数ピクセルでレイアウト計算を行うため、より正確に幅を表現でき、塗りつぶし時にピクセルグリッドにスナップすることができます。

可能な解決策は、コンテナの幅が10ピクセルの倍数であることを確認し、WebKitチームに整数ピクセル動作に不平を言うことです。または両方。