IE6以下でHTML4.01で構築している場合、指定したwidthがborderとpaddingを含んだ値になる

HTML4.0またはHTML4.01で構築している場合、指定したwidthがborderとpaddingを含んだ値になってしまう現象がIE6で発生します。

上記のCSSの場合、通常は
width + padding-left + padding-right + border-left + border-right = 合計幅
という計算になり、
100 + 10 + 10 + 1 + 1 = 122px
となりますが、IE6では
(width - padding-left - padding-right - border-left - border-right) + padding-left + padding-right + border-left + border-right = 合計幅
という計算になり、
(100 - 10 - 10 - 1 - 1) + 10 + 10 + 1 + 1 = 100px
となってしまいます。

この不具合（バグ）は以下の方法で解消することができます。

• IE6以下の場合のみwidthの値をborderとpaddingを含んだ値で指定する（ハックを使用）。
• HTML4.01以外で構築する。

IE6以下の場合のみwidthの値をborderとpaddingを含んだ値で指定する（ハックを使用）

HTML4.01以外で構築する

XHTMLやHTML5などHTML4.0（またはHTML4.01）以外で構築します。
HTML4.0（またはHTML4.01）以外で構築ができない場合は、この方法は使用できません（当たり前ですが）。