ボックスモデル：Internet ExplorerとW3C
今日、 Internet Explorer Box Modelの問題 はほとんど問題ではありません。ほとんどのWeb開発者は<!DOCTYPE>タグを配置して標準への準拠を強制しますが、Internet Explorer 5.5のサポートに関心を持つ人はいません。
しかし、 一部の開発者 は、IEボックスモデルを擁護する主観的で概念的な議論を考え出しました。 IEボックスモデルはW3Cモデルよりも「直感的」であると彼らは主張しています。W3Cモデルはボックスのcontentを測定するため、一方、IEモデルはボックス自体を測定します。
私は彼らの視点を見ることができますが、それは基本的に主観的な議論であり、最も重要なことはstandardsコンプライアンスです。
しかし、最近私は重大な実用的な理由でIEボックスモデルを好むようになりました。 W3Cボックスモデルでは、要素を別の要素の画面上の正確なピクセル幅に動的にサイズ変更することが困難です。その理由は、要素のstyle.widthプロパティは要素の画面上の合計サイズを考慮していないためです。追加の境界線とパディングも考慮する必要があります。両方の要素が同じCSSクラスを使用している場合、これは問題ではありませんが、differentCSSクラスがある場合、これは非常に困難になる可能性があります。
AとBの2つのdivがあるとします。Aは400px divとしてhtmlにハードコードされていますが、BはJavaScriptを使用して動的に作成されます。視覚的には、BをAの正確な幅にする必要があります。古いIEボックスモデルでは、これは簡単です。単にB.style.width = A.style.width、またはB.style.width = A.offsetWidth + "px"と言うだけです。
しかし、W3Cボックスモデルでは、これはそれほど単純ではありません。次に、スタイルシートについても考慮する必要があります。 BがAと同じCSSクラスを持っている場合は、単にB.style.width = A.style.widthと言うことができます。しかし、そうでない場合-およびwant美的な理由でそれができない場合があります-私たちは困っています。次に、ボーダーとAとBの両方のパディングの合計ピクセル数を考慮する必要があります。ボーダーとパディングが一貫性のない単位で指定されている場合、これは特に困難になる可能性があります（ボーダーは1px行であることが多いため、一般的に発生しますが、パディングemsで指定される場合があります）。次に、共通単位（emからpxまたはpxからem）に変換する quasi-impossible task に直面します。これはすべて、画面上に2つのdivを正確に並べるためです。
したがって、基本的に、W3Cボックスモデルでは、要素のサイズを設定するときにCSSの境界線とパディングの問題を考慮する必要がありますが、IEボックスモデルでは考慮しません。幅はボックス全体のサイズボックスのcontentではなく、ボックス全体（エンドツーエンド）。これにより、相互に関連して動的に要素のサイズを設定することが非常に簡単になります。
これらすべてが、W3CモデルよりもIEボックスモデルを支持するかなり強力な理由のようです（少なくとも概念的には-もちろん、実際にはIEボックスモデルは無効です）。
質問：W3Cはなぜこのボックスモデルを選んだのですか？ W3Cボックスモデルのadvantagesに、単に表示されていないものはありますか？または、私はここで問題を単に誇張していますか？
パディングとボーダーを幅に含めるかどうかの選択は任意でした。重要なのは、複数列のレイアウトを作成することだけでした。ただし、とにかく人々がレイアウトにテーブルを使用したという事実を考慮する必要があります。そのため、その懸念はそれほど重要ではないように見え、CSSでコンテンツ自体が占める正確な幅を指定できることは、はるかに価値があるように思われると考えました。
今日の開発者にとって、レイアウトにCSSを使用し、CSSボクシングモデルを処理する必要があるため、状況はまったく異なるように見えます。ありがたいことに、ボクシングルールをオーバーライドする機能があるため、ほとんどの場合、スタイルシートの上部にある単純なルールは非常にうまく機能します。
* {
-mox-box-sizing: border-box;
box-sizing: border-box;
}
引用するには 件名のJeff Kaufman ：
しかし、仕様がそれを逆に定義していることを考えると、彼らの誤解を採用するためにMicrosoftに送信するであろう信号は、Webにとって悪いものでした。マイクロソフトは、ユーザーをMicrosoftバージョンに固定するために、競合他社とは異なる動作をする製品を意図的に作成する、抱擁、拡張、および消火のアプローチをすでに使用していました。彼らはウェブでの成功に非常に近づきました：およそ2000年から2005年までIEは非常に人気があり、多くのサイトがそれだけのために設計しました。IEのアプローチをここで採用するMicrosoftに「IEで何でもやりたいことができれば、標準を合法にするために調整します」と言ったかもしれません。
したがって、ボックスモデルはW3CとMicrosoftの間の権力闘争の犠牲者となりました。