XML宣言付きのXHTMLは、IE6だけ互換モードで、Firefoxとかその他のメジャーブラウザは標準モードで表示を行う。今はIE6ユーザーが全盛なので、標準モードのブラウザの表示をIE6に合わせようとして、以下のようなボックスモデルハックを使うことがある。

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

このボックスモデルハックの真意は、「標準モードのブラウザも、ボックスの描画時は互換モードと同じようにしてね」ということ。ところが、IE7は、そこらへんの空気を読まずに、XML宣言付きXHTMLを標準モードで表示し、ボックス描画も標準通りに行うので、表示崩れを起こしてしまう。

対処法としては、IE6中心の発想を改めて、標準モードで正しく表示されるようにCSSを定義すること。そして、IE6のために、アンダーバーハックを使って独自の定義をする。

* {
    /* box-sizing 等は消去!! */
}
.sample {
    width:		200px;
    border:	2px solid #000;
    padding:	0 10px;
    _width:	224px; /* for ie6 */
}

アンダーバーハックは、IE7ではバグが修正されているため、スタイルとして反映されない。つまり、_width はIE6だけに反映される。IE7の製品版リリースまでは実際にどうなるか分からないけれども、たぶんこのままイケるんじゃないかと睨んでいる。

こんなことなら、最初から標準に向かってCSSを設計しておくんだったなあーと、しきりに後悔している。同士の人、頑張りましょう。