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

カテゴリ:CSSハック 2009年5月12日 13:04

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

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

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

参考サイト

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

CSS ソース

HTML ソース

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ハック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/140

トラックバック

混乱 IE8のCSSハック

今まで余り使っていなかったけど、次のテンプレートでCSSハックを使おうかと思っています。これはブラウザによって、別々のCSSを指定できるというもの。

bymasimarock 2009年6月 6日 02:04

CSSハックまとめ

使わない方がいいと思いつつも使ってしまうCSSハック毎回検索してIE8が載ってないとかIE8はあるのにSafariがないとか何度も検索するのも面倒なんで自...

byCUBIC4 2010年4月20日 14:09

実用 CSSハック 一覧 − web tips 追加

 web tips サンプルを追加しました。 実用 CSSハック 一覧CSSハックって、必要悪という気もしますが、ブラウザが複数...、...

bys-ej blog 2011年7月 7日 16:46

コメント

1 - チャニアーン さん

FF3.5+Firebug1.4.5で プロパティの後に/***/がないと、パーズエラーが発生していました。結果表示には問題ないようですが、記述しておいた方がよさそうです。

2009年11月27日 06:49

2 - えど Author Profile Pageさん

>>1 - チャニアーンさんすみません、コメントのパースエラーがちょっと再現できませんでした・・。nどのような状況になるんでしょうか・・?

2009年11月30日 15:41