[CSS]IE6とIE7でスタイルシートを分けるテクニック

前回からだいぶ更新をサボってしまいましたが、久々のアップです。

スタイルシートを適用してページを作成するとIEとFireFoxで期待したとおりの表示ができない場合がよくあります。またIEでもバージョン6と7でも違って表示される場合があります。

こんなときにはFireFoxでとりあえず表示できるようにしておいて、IE6とIE7でそれぞれ別のCSSを適用して表示を思ったようにするテクニックがあります。

IE6の場合には、セレクタの頭に「* html」とつけます。

たとえば、

* html .sample {
    color: #00ff00;
}

とするとクラスが「sample」となっている部分の文字の色が緑で表示されるようになります。

IE7に適用したい場合は、セレクタの頭に「*:first-child+html」とつけます。

たとえば、

*:first-child+html .sample {
    color: #0000ff;
}

とするとクラスが「sample」となっている部分の文字の色が青く表示されるようになります。

両方を同じスタイルシートに記述することでアクセスしたブラウザによって表示を変えることができます。

.sample {
    color: #ff0000;
}
html .sample {
    color: #00ff00;
}
*:first-child+html .sample {
    color: #0000ff;
}

これは、FireFoxとSafariでアクセスした場合は赤、IE6は緑、IE7では青で表示されるようになります。

こんな↓感じになります。ブラウザを変えてアクセスしてみてください。

このテクニックは、主にpositionを利用した場合にアクセスしたブラウザで微妙に位置がずれるといった場合によく使うと思います。

注意ですが、記述された順番でCSSが適用されるので頭に何もつかないセレクタを最後にもってくると最後のCSSが適用されてしまうので意味がなくなってしまいます。ですのでくれぐれも順番に気をつけてください。