【CSSハック】スターハック

HTML&CSS

2007.03.15

イメージ

今回から数回に渡り（？）CSSハックについてご紹介していきます。

CSSハック。
できる限りWEB標準の仕様に従ってコーディングしていきたいところですが、必ずといっていいほど出てくる問題がInternet Exploper（IE）ブラウザによる表示の違いです。

IEはFireFox、safariなどのモダンブラウザとは違う解釈をするためコーディング時にいろいろと不具合がでてきます。

IEでの表示不具合の例

背景画像が表示されない
floatされた文字が消えてしまう
marginで指定した幅にならない

などなど、様々な現象が立ちはだかります。
IE7では、これら不具合に対応しはじめていますがまだ完全ではありません。

現在IEは、シェアが85%ほどあり一番使用されているというところが曲者で、そのためにやむを得ずハックを使用する機会が度々あります。

そんなときにIEのみにハックする場合に使用するのがスターハックです。

対象ブラウザ

Windows IE 4〜6
Mac IE 4〜5

CSS使用方法

適応させたいセレクタの前に【* html】をつける。
サンプルは以下。

div#header p { /* Firefox、Netscape、Opera、Safariに適応 */
	margin: 5px;
}

* html div#header p { /* IEのみに適応 */
	margin: 10px;
}