IE8 がリリースしてしばらく経ちました。
現状では、CSS2.1 への準拠が一番、と言われていますが、正直 CSS3 に対応してくれないと使い物にならない、ってのが正直な感想です。

ただそれでも、以前の IE たちに比べるとずいぶんとお利口になったようで、あまりレイアウトが崩れる、というのがないのではないでしょうか。
しかしながら、まだたまにおかしな挙動をする部分があり、しかもそれが IE8 だけ、なんてことになるとハックの出番かな、なんてことになります。

そんなこんなで、IE8 対策が必要な場合に備えて、ハックを調べてみたらいくつか見つかりました。備忘録的にもエントリーしたいと思います。（ハックは 2 種類あります）

参考サイト

IE8 だけに適用させる CSS ハックデモ

CSS ソース

/* sample01 */ #sample01 p { color: blue; } /* IE7以前向け */ head/* */body #sample01 p { color: red; } /* IE8向け */ html:not(:target) #sample01 p { color: blue; } /* モダンブラウザ向け */ /* sample02 */ html>/**/body #sample02 p { color /***/: blue9; font-size: 20px9; }

HTML ソース

<div id="sample01"> <p>IE8 のみ、テキストが赤くなります。</p> <!-- /#sample01 --></div> <div id="sample02"> <p>IE8 のみ、テキストが青くなります。</p> <!-- /#sample02 --></div>

CSS ソース概要

今回のサンプルで、実際に使いやすいのは sample02 ではないかなと思います。
そのものズバリを適用させることができるので。ということで、順番前後しますが sample02 から説明したいと思います。

sample02 の説明

見てもらうと分かりますが、注意点は 3 箇所。
まず最初に、html>/**/bodyと、子セレクタを使いつつ、>とbodyの間に/**/と、空のコメントを入れます。
これを入れないと、IE7 でも適用されてしまうようです。

次に、プロパティの後ろに/***/を入れます。（サンプルではcolor /***/
これに関しては、この表記がなくても IE6,7, Firefox2,3, Safari4, Opera9, Google Chrome で確認したところどれも適用されませんでした。Mac では確認していないので Mac 向けの指定かもしれません。念のため。

最後に、値の後ろに9を追加します。
他のプロパティも指定したい場合は、9がないときと同じように行末に;をつけて、次のプロパティからは/***/なくても大丈夫なようです。

sample01 の説明

続いて sample01 の説明です。
sample01 は 3 行からなります。サンプルソースのコメントに書いてありますが、1 行目が IE6, 7 用、2 行目が IE8 用、最後がモダンブラウザ用となります。

最初の 1 行目は通常の指定ですね。このままであれば、全ブラウザに適用されるスタイルになります。
続いて 2 行目。これは間接セレクタを使った指定です。ただこの指定だけだと間接セレクタを正常に解釈できるモダンブラウザにも適用されてしまうために、これを打ち消すために最後の 3 行目が必要なわけです。

そして最後の 3 行目、IE8 は CSS3 の対応があまいく、not 疑似クラスに対応していないため IE8 を除いたモダンブラウザ向けにスタイルが適用できる、というわけです。これが打ち消しの 3 行目です。

ちなみに、2 行目の指定でコメントが途中入っているのは IE7 対策です。
このコメントがないと IE7 にもスタイルが適用されてしまうためこのような記述があります。

この記事のカテゴリー一覧を見る⇒CSSハック

• Tweet
• 
• 

• パーマリンク
• コメント(4)
• トラックバック(3)

• <<IE6,7で、疑似要素を指定した要素に隣接するスタイルがおかしくなる件
• |
• 【要感染確認】GENOウイルスに注意！>>