ボックスモデルの解釈の違いに対応する
以上みてきたように、クロスブラウザなデザインを実現するためには、特定のブラウザを排除したり、特定ブラウザ専用のスタイルシートを作成したりするなどの工夫が必要となるわけですが、ここで、具体例として、前回の記事で紹介した「ボックスモデルの解釈の違い」に対応する方法を紹介しておきましょう。これを押さえておくと、クロスブラウザなデザインを実現するための最初の難関をクリアしたも同然です。
専用スタイルシートで対応する
ここでは例として、p要素に対し、幅と高さをそれぞれ200px、上下左右のパディングとボーダーをそれぞれ20pxとし、次のようなスタイルを適用させることにします。
p{
padding:20px;
border:20px #00f solid;
width:200px;
height: 200px;
}
前回のおさらいになりますが、本来なら、下図のようにwidthやheightで指定した200pxが仕様上の幅と高さになるはずです。
しかし、Win IE 4～5.5や6.0などの互換モードでは、上下左右のパディング40px分と上下左右のボーダー40px分を含めて幅200px、高さ200pxとして表示してしまいます。
これらブラウザの実装不備に対応するには、本来の幅（200px）と高さ（200px）にパディングとボーダーの幅／高さを含めて指定します。従ってこの場合、「width＝本来の幅200px＋左右パディング40px＋左右ボーダー40px＝合計280px」となり、同様に「height＝本来の高さ200px＋上下パディング40px＋上下ボーダー40px＝合計280px」となります。
p{
padding: 20px;
boder: 20px #00f solid;
width: 280px;
height: 280px;
}
この専用スタイルシートを共通スタイルシート（本来の正しい解釈）を上書きする形で対象ブラウザに読み込ませると、表示結果は次のようになります。
ボックスモデルハックで対応する
また、ボックスモデルの問題に対応する他の手段としては、その名の通り「ボックスモデルハック」というCSSハックを使用する方法があります。仕組みとしては、さきほどの専用スタイルシートを使用する場合とは逆で、まず全ブラウザに対し、誤った解釈をするブラウザ用のスタイルを適用させ、後から正しい解釈をするブラウザだけに本来のスタイルを読み込まるというものです。通常、共有させる基本スタイルシートに記述して使用します。
p{
padding: 20px;
boder: 20px #00f solid;
width: 280px;
height: 280px;
}
/* この後の記述は、Win IE 4～5.5や互換モードのブラウザでは無視される */
voice-family:"\"}\"";
voice-family:"inherit";
width: 200px;
height: 200px;
まとめ
今回はクロスブラウザなデザインを実現するため具体策として、CSSハックを中心に解説しました。CSSハックは、ブラウザの強制終了や誤動作を防ぎ、安定した閲覧環境を提供するという前向きな意味合いをもって利用されることもあります。しかし、CSSハックの使用を考える際は、そのメリットやデメリットを踏まえた上で、本当に使用する必要があるかどうかを見極めることが大切です。より多くのブラウザで検証し、CSSハックの使用を極力押さえる方法を見つける工夫をしましょう。
