More than 5 years have passed since last update.

IE対策：複数クラスを使うとき

Last updated at 2014-09-18Posted at 2014-09-10

IE6で見たときにレイアウトが崩れていたため、
原因を探していたのですが、複数クラスをセレクタに指定していたためでした。
IE6では、複数クラスの実装が対応していないと調べたのにすっかり忘れていました。

忘れないためにも、記録に残しておきます。

前提: 複数クラス

HTML

<div class="a_box">A box</div>
<div class="b_box">B box</div>
<div class="a_box b_box">c box</div>

CSS

.a_box{ background-color: green;}
.b_box{ background-color: red;}
.a_box.b_box{ background-color: yellow;}

css側でクラス名を連結させると、
この二つのクラス（例で言うとa_boxとb_box）が指定されているスタイルだけ、中のスタイルをあてることができます。

■chrome

IE6ではそのままクラス名を並べると、
一番最後のクラス名単体でしか見られていません。

.a_box.b_box.c_box｛～｝
だと、.c_boxしか読み取っていません。

HTML

<div class="a_box"> box1</div>
<div class="b_box"> box2</div>
<div class="a_box b_box c_box"> box3</div>

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.c_box{ background-color: blue;}

■IE6

box3はc_boxのスタイルしか効いていません。
~~.a_box~~.c_box{ background-color: blue;}
↑このように。

でもこれではまだ証明にならないため、もう1パターン

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.b_box{ background-color: orange;}

本来ならば、
box2は黄色ですのに、

■chrome

IE6だと、
a_boxクラスとb_boxクラスが指定されたときのみ指定されると背景色になるはずのオレンジ色になってしまっています。

■IE6

IE6では~~.a_box~~.b_boxと読み取っているので、単純に背景色黄色をオレンジ色で上書きしてしまっています。

このバグはセレクタの最後でクラスのスタイルの上書きをしようとした際に
発生するものらしいので、最後に別のものを追加すれば回避できます。

以下では、セレクタの最後にpを入れることで回避しています。

HTML

<div class="a_box"> box1</div>
<div class="b_box"> box2</div>
<div class="a_box b_box c_box"><p>box3</p></div>

CSS

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.b_box p{ background-color: orange; margin-top: 0px;}

■IE6

全てのセレクタの最後にpを入れてしまうと結局は最後に同じ名称になってしまうのでだめです。
異なる名称を入れてくださいね。