この記事で紹介しているハックとは別のソリューションを「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 を入れてみた方は実際に確認して見たら良いかも。
Comments