ブラウザの解釈対策（Opera編）

Operaの場合、モダンブラウザ（IE 6.x）と同じ解釈方法をしますが、IE 5.5と同じく、voice-familyプロパティを上手く読み込むことができないバグを持っています。

つまり、前回の対策を行った場合、IE 5.5用の間違ったwidthプロパティの数値を読み込んでしまうため、Operaでのレイアウトが崩れていまう恐れがあります。

そこで、#sampleのスタイルの下に次のスタイルを追加します。

＜CSS の記述例＞

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

セレクタ部分（html>body）に子供セレクタ（>）を使用します。この子供セレクタは、CSS2でサポートされているもので、CSS2を理解できない古いブラウザ（IE5.5等）では読み込むことができません。

一方、Operaでは、子供セレクタを理解することができますので、そのセレクタ内にモダンブラウザ用の数値を記述することで、Opera対策をすることができます。

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