IE 7 用の CSS ハック

この記事で紹介しているハックとは別のソリューションを「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」と言う記事で紹介しているので、合わせてご覧になって見ると良いかもしれません。

Internet Explorer 7 の Beta 2 Preview が公開された。んで、公式的にはバグを取り除くんで現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE 7 向けの CSS ハックが報告されている。

カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。

<body lang="ja">
<div id="contents">
<p>foo</p>
</div>
</body>

これに対して、まずベースとして IE7 を含む全てのブラウザ向けの指定を行う。例えば背景色を赤とする。

#contents {
    background-color: red;
}

その後に IE7 を含む全てのバージョンの IE 以外のブラウザへの指定を !important でオーバーライドさせる。例えば背景色を緑。

*:lang(ja) #contents {
    background-color: green !important;
}

ただ、このままだと Safari も :lang に対応していない。そこで、Safari で不完全に対応されている CSS3 の :empty 疑似クラスを使って Safari 向けの指定を行う。

#contents:empty {
    background-color: green !important;
}

これらによって、バージョン 7 を含む IE では背景色が赤、それ以外のブラウザでは背景色が緑となる。らしいですよ!スイマセン、まだ IE7 は落としてないんで自分で試してない :-P。テストページが上記ネタもとには用意されているんで、IE7 Beta 2 Preview を入れてみた方は実際に確認して見たら良いかも。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/44

Imaginary Affair - IE 7 の CSS ハック (2006年2月 4日 07:32)

Lucky bag::blog: IE 7 用の CSS ハック では IE 7... 続きを読む

Richard on Web - IEの規格とCSS (2006年2月 7日 10:25)

JAM LOG : IE7β関連というエントリーより。 IE7βのCSSやWeb... 続きを読む

Comments