ブラウザの解釈対策（Windows IE 5.x編）

まずは、Windows版IE 5.x対策として、最も有名な回避方法を紹介します。

■ Box Model Hack（ボックスモデルハック）

この回避方法は、Tantek Celik氏が見つけ出したもので、Windows版IE 5.xにあるCSSのバグを利用したものです。

具体的には、IE 5.xでは理解することができないCSSプロパティ（voice-family）を記述し、その前後に、IE 5.x用、6.x用の数値を記述する方法です。

＜CSS の記述例＞

#sample { 　　margin: 10px; 　　padding: 10px; 　　border: 2px solid #000; /* 古いIE用の幅（コンテンツ幅＋ボーダー幅＋左右パディングの幅） */ 　　width: 400px; /* ボックスモデルハック */ 　　voice-family : "\"}\""; 　　voice-family : inherit; /* モダンブラウザ用のコンテンツ幅 */ 　　width: 376px; }

IE 5.xでは、voice-familyプロパティを上手く読み込むことができないため、途中で#sampleのスタイルの読み込みを終了してしまうというバグがあります。

このバグを利用することで、IE 5.xでは、voice-familyプロパティの直前に記述されたwidthの数値までを読み込みます。

モダンブラウザでは、IE 5.x用のwidthの数値を読み込んでも、voice-familyプロパティの下にあるwidthの数値を読み直しますので、新旧のブラウザで正しい数値を読み込むことができます。

[参考記事] Box ModelHack
[参考記事] Box ModelHack（邦訳）

[次の講義へ] ブラウザの解釈対策（Opera編）

参考になりましたら、応援お願いします。