JQueryがCSSボックスモデル(Box Model)を決める_jquery

ページに有効な DOCTYPE 宣言が含まれている場合、そのページは厳密モードで表示されます。
ページに DOCTYPE 宣言がない場合、または有効な DOCTYPE 宣言がない場合は、互換モードで表示されます。
2 つのモードの違いを次に示します。2 つのレンダリング モードの主な違いは、要素の幅と高さのスタイルの計算です。たとえば、次のスタイル

コードをコピー コードは次のとおりです。

{
幅:180ピクセル;
高さ:72ピクセル;
ボーダー幅:180*72ピクセル。パディングと境界線が 180*72 ピクセルの範囲外です。したがって、要素全体のカバー範囲は、幅:180 10*2 5*2 = 210px、高さ:72 10*2 5*2 =102px となります。
IE の互換モードでは、要素全体のカバー領域は 180*72 ピクセルです。コンテンツのサイズは、幅 180 - 10*2 - 5*2=150px、高さ 72 - 10*2 - 5*2 =32px に縮小されます。
JQuery を使用して Box Modal を判定するのは非常に簡単です。これには、bool 型の $.boxModel フラグが渡されます。ページが W3C 標準モデルを使用している場合は true を返し、それ以外の場合は false を返します。