互換モード(Quirks モード) 時 の box モデルを扱いやすくするための CSS

2009年4月15日 水曜日

古いWebサイトの場合、システムやガイドラインの都合で、互換モード時 (Quirks モード) で構築しなければいけない場合があります。

互換モード (Quirks モード) 時は Opera 7, 8 の DOCTYPE スイッチ にあるように、標準モードと異なる解釈がされますが特にレイアウトに影響を及ぼす、width に padding や border を含めるか否かの違いに苦戦することが多いはずです。

互換モード時、IE では強制で border-box (width に padding や border を含める) の解釈になりますが、Firefox などでは　content-box (width に padding やborder を含めない)で解釈されます。

そこで、Firefox などの boxモデルの解釈を IE に合わせて、 box モデルの解釈のされ方を border-box に統一します。

次のような CSS のコードを追記することで、実現が可能です。

*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

合わせて IE で table 内に font 関連のプロパティーが継承されない問題の対策も追記しておくと、さらに扱いやすくなります。

table{
font-size:100%;
}

*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}