« ブログ悲観論に思う、このブログはじまって以来のまじめ記事 | メイン | JR福知山線事故、ぼんやりと雑感追加 »

そろそろIEをはじくCSSも整理しておきますか

CSSレイアウトで一番悩まされるのがIE5xとIE6で表示が違う点だろうが、じゃあIE5xを無視して考えて、IE6だけに絞れば大丈夫なのか、というとそうでもない。IE6は6で、Firefoxなど他のブラウザが当たり前に実装しているスタイルに対応していなかったり、IE6になっても修正されていないバグもある。

というわけで、そんな時に対処療法的に使えるスタイルをメモ。基本的にはValidなCSSで、IEが対応していない、結果的にブラウザを振り分けて指示ができる、というものを2例ばかり。

Win IEだけはじく
body {
background-color: #CCCCCC !important;
background-color: #FF0000;
}

!importantの処理にWinのIEが対応していないことを利用。
通常、CSSは後からの指示を上書きするのだが、この「!important」を付加しておくと、文字通りこの指示が重要であるということで、順序・序列に関係なくこのスタイルを優先する。

ところが、なぜかWinのIEは5xも6もこの指示に対応していない。なので、先に本来のスタイルを指定した上で「!important」宣言しておき、後からWinIEだけが上書きするスタイルを記述すればよい。
なお、この方法でははじかれるのは「Winの」IEだけ、MacIE5xは「!important」は有効。


WinとMacのIEをはじく
body {
background-color: #CCCCCC;
}
* html body {
background-color: #FF0000;
}

「* html セレクタ名」に反応するのは、WinとMacのIEだけなので、それを利用する。先に他のブラウザ用記述を行い、あとからWin+Mac IE用記述を上書きする。



トラックバック

この一覧は、次のエントリーを参照しています: そろそろIEをはじくCSSも整理しておきますか:

» Internet Explorer 周りの CSS 制御 from 3lektr0pank's Obscure Days
とりあえず現行バージョンのすべてのブラウザで問題なく見れるようになった。 Win... [詳しくはこちら]

コメント

はじめまして。
私の持っている文献には"!important"に関して触れてなかったもので、こちらで値のみをWin IE用に変更させる方法が分かって、大変参考になりました。
ありがとうございます。

comment1 star trek: deep space nine