このページをご覧ください。 それぞれ幅25％の4つのフローティングブロックは、幅50pxのコンテナー内にあり、青色で強調表示されています。 質問は次のとおりです。各ブロックの幅は？
この幅は12.5pxでなければなりませんが、 整数値のみを使用できるため、値を丸める必要があります。 そして、質問が発生します：どの方法で丸めるのですか？ 大きい、小さい、またはその両方ですか？ 私のように、私が思う結果はあなたを驚かせるでしょう。
その結果、3つの完全に異なるキャンプがあります。
-切り捨て-OperaとSafariの両方が幅の値を12pxに切り上げました。 その結果、ブロックの右側に2倍のスペースギャップが形成されました（緑色でマーク）。 なぜあなたは美しいナビゲーションがコンテナ全体を満たさないのか疑問に思ったことがあれば、今では答えがわかります。
-
切り上げ -6番目と7番目のInternet Explorerでは幅が13ピクセルに拡大され、サイト構造の「内訳」につながります。
-
双方向の丸め-Firefox 2および3は両方のアプローチを組み合わせて、一部のブロックの幅を下側に丸め、他のブロックの幅をより大きく丸めます。 副作用は、CSSが同じ値を持っているという事実にもかかわらず、ブロックの幅が異なる意味を持つようになったことです。 さらに、Javascriptを使用して幅の値を取得する場合、12.5pxに等しくなり、丸めがどのように実行されたかはわかりません。 もう1つの不快な瞬間があります。 Firefox 3は丸め順序を変更します。
Mozilla開発者の1人である
David Baronは、状況を明確にしました。
-下記のすべてのルールを順守しようとしますが、同時に満たすことはできません：
1.幅/高さが25％（たとえば）で、外側のコンテナの一方の端から始まる4つの隣接するオブジェクトは、もう一方の端で終わる必要があります。 空きピクセルや余分なピクセルは表示されません。
2.論理的に隣接するオブジェクトは、常に視覚的に互いに接触する必要があります。 丸めエラーに起因する空白スペースやオーバーレイはありません。
3.同じ幅のオブジェクトは、指定されたピクセル数を占める必要があります。
4.オブジェクトの境界がぼやけてはいけません。
これらのルールは役立つかもしれませんが、残りのルールを満足させるためには、少なくとも1つを犠牲にする必要があります。