jquery - html要素の幅は個々の子要素の幅の合計よりも小さいですか？

Question

http://jsfiddle.net/3BFGU/71/

html親要素の幅（1 $（el）.width（）1を使用して計算）は、子要素の合計幅よりも小さくなっています。

1. Firefoxでのみ発生します。

なぜこれが起こっているのか考えていますか？

Answer 1

おそらく、合計幅は幅の合計であり、これらの分数幅は以前に何らかの方法で丸められていました。この合計はコンテナの幅と等しくありません。5 つの要素に対して 3 ピクセルの違いなど、より多くの要素がより不正確になることがわかりました。

実際、インライン テキスト ブロックは、たとえば 10.6px のように分数の幅を持つことができます。したがって、これらのブロックを 3 つ並べると、31.8px ≈ 32px になります。しかし、各幅を ≈ 11px * 3 = 合計 33px に丸めた場合。これが1ピクセルの違いです。http://jsfiddle.net/3BFGU/86/

nb Firefox のフォント レンダリング エンジンは、 font-size > 15px の場合にのみサブピクセルの文字配置を使用し始めます(少なくとも、極端なヒンティングが適用されている Verdana、Arial、および Segoe UI の場合)。すべての文字が整数の幅の値を持ち、文字列内のすべての同じ文字がまったく同じラスター イメージを持つ場合。この動作は、との間の切り替えで明確に見られます。letter-spacing: .9px;font-size: 14.9px;font-size: 15.1px;

それに加えて、1 年前に、さまざまなブラウザーのレンダリング エンジンをテストするための小さなプレイグラウンドを作成しました。