CSS Radar

Box Model ハック

IE5.xとOpera5のボックスモデルバグの修正

CSSの説明

• 2行目 - IE 5.xのCSSパーシングのバグを利用して、
• 3行目 - 1行目のWidthをIE5.xのみ4行目のWidthに上書き
• 8行目では、Opera5のCSSパーシングのバグを利用し
• 9行目Opera5のみのWidthを9行目のWidthに上書き

Box Model ハック by tantek

div.content {
  width:400px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width:300px;
}

html>body .content {
  width:300px;
}

ボックスモデルバグとは？

Wikipediaにエントリがあるほど有名なバグ。
ボックスモデルとは、CSSにおけるブロック(display: block、p、divなど)要素の表示の概念モデル。
言葉で説明をするより、インタラクティブ・ボックスモデル(英語)、実際に見る方が理解しやすいだろう。


1996年(1999年改訂)にW3CはCSS1 Specificationの定義を、
Width、Heightがブロック要素に指定されている場合、ボックス内のコンテントのWidthとHeightのみへの指定とするとし、ボックスモデルの残りの要素である、padding、border、marginの値はその指定後に追加されるとしている。
IE5.xではpadding、borderの値をWidth(あるいはHeight)の値として評価するバグがある。
IE for Macにはこのバグは存在しない。