IE7で再考するボックスモデルとDOCTYPEスイッチ
IE7のWeb標準準拠の動きのおかげで、DOCTYPEスイッチとボックスモデルハックを使用してきたサイトは、その設計を見直さないといけないという、やたら哀しげな状況が生まれている。まあ、自分の手がけてきたサイトがそうなんですが。
取り急ぎ、簡単な対策をメモ。
対象となるのは、XML宣言付きのXHTMLで、CSSハックによってボックスモデルを互換モードで表示しているサイト。要は、IE6を中心に設計されちゃっているサイトね。
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を設計しておくんだったなあーと、しきりに後悔している。同士の人、頑張りましょう。
Posted by dT by 12:21