!importantを使ったIEバグ対処法

CSSの解釈についてはバグの多いブラウザとされるWinIE系ですが、そのWinIE特有のバグを逆手に取ってCSSを正規解釈するブラウザと同じ表示を得る簡単な方法をひとつ。
今回はCSSの各プロパティを適用させる際にその優先度を高め、最優先とさせる「!important」という宣言を利用します。

その前にCSSが適用される優先度について少し触れておきます。

基本的に、親子関係等の指定が細かくされている方が優先度は高くなりますが、各セレクタには獲得ポイントというものが存在し、それによって優先度が決まります。

• 全称セレクタ（*） > 0ポイント
• 一般セレクタ（h1,pなど） > 1ポイント
• class指定（.sampleなど） > 10ポイント
• id指定（#sampleなど） > 100ポイント

また上記のような決まりがある他、CSSには「前に指定したものより後に指定したものを優先する」という決まりもあります。
今回はこのルールと「!important宣言をすると最優先になる」というルールを利用します。

1. p {
2.     color:#f00 !important;
3.     color:#00f;
4. }

上記のような指定をした場合、通常は!importantを優先しますのでpタグの中の文字色はcolor:#f00で指定された赤色になります。

ところがWinIEでは「後に指定したものを優先する」という方を強く解釈してしまう（!importantを無視してしまう）ので、color:#00f;で指定された青色で表示されてしまいます。

このバグを利用して、WinIEで意図しない表示になった場合に、WinIEにのみ異なる値を指定してやることで、WinIE以外のブラウザと同様の表示を得られることになります。

「バグをもってバグを制す」という感じですが、各ブラウザの持つバグへの対処はこの考え方を元に対処することが多いようです。

【関連記事】

• アンダースコア・ハック(Underscore Hack)