2008年10月16日

IE6.0のバグ 〜idとclassを両方設定した際

こんにちは。
馬場です。


今回はIE6.0のバグについてお話します。

1つのタグにidとclassを両方設定した際に
起きるバグです。
(わかりづらくて、すいません。。。)

このバグが発生する条件は
少し限られていて、
idで設定したスタイルを
classを付け替えることによって、
見た目を変更しようとすると
発生します。

ページのレイアウトは一緒だけど、
色違いのページが数パターンある
という場合などで
使用するかもしれませんね。


▼バグの発生条件▼
・IE6.0で確認している。
・1つのタグにidとclassを設定している。
・classを切り替えることにより、スタイルを切り替えている。
・セレクタの最後がそのidとclassの指定で終わっている。
▼症状▼
最初にidとclassの両方で設定したスタイルのみ適応され、
それ以降のclassの付け替えによるスタイルが
適応されない。

※比較しやすいように、
サンプルでは同じIDを同ページ内で
複数箇所使用していますが、
異なるページで同じスタイルを読み込むと
バグが出てしまうことは確認済みです。



 

■バグの症状

まずは、ソースをごらんください。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper01">
<div id="title01" class="style01">
<p>バグテスト01</p>
</div>
<div id="title01" class="style02">
<p>バグテスト01</p>
</div>
<div id="title01" class="style03">
<p>バグテスト01</p>
</div>
</div>
(cssサンプル)
#title01 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title01.style01 {
background-color:#FF3333;
}
#title01.style02 {
background-color:#0000FF;
}
#title01.style03 {
background-color:#339900;
}


上記のソースでは、
title01というidに
classを付けることで、
背景色を切り替えています。


下の画像は
上記のソースを
firefox2.0で確認したものと
IE6.0で確認したものの
スクリーンショットです。




firefox2.0では
スタイルの指定どおり、
classの付け替えで
帯の色が変わっているのが
確認できますが、
IE6では、
一番上に記述した「style01」クラスの
スタイルのみ反映され、
その他の「style02」クラス、
「style03」クラスは
適応されていないのが
確認できると思います。


スタイルの設定では、
「style01」クラス
「style02」クラス
「style03」クラス
の順番に記述していますが、

例えば、
「style02」クラス
「style03」クラス
「style01」クラス
のように順番を変更すると

一番上の「style02」クラスが適応され
「style01」クラス
「style03」クラス
は適応されないことから、
「一番最初に記述したスタイルのみ
適応されている」ことが想像できます。




また、
2つ目以降のスタイルを
#wrapper01 #title01.style02
のように
スタイルの上書きを試みても、
反映されませんし、
!importantも効きません。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper02">
<div id="title02" class="style01">
<p>バグテスト02</p>
</div>
<div id="title02" class="style02">
<p>バグテスト02</p>
</div>
<div id="title02" class="style03">
<p>バグテスト02</p>
</div>
</div>
(cssサンプル)
#title02 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title02.style01 {
background-color:#FF3333;
}
#wrapper02 #title02.style02 {
background-color:#0000FF;
}
#title02.style03 {
background-color:#339900 !important;
}

 

■バグの回避方法


バグの発生条件にも
書きましたが、
どうやらセレクタの最後で
クラスの付け替えによる
スタイルの上書きをしようと試みた際に
発生するようなので、
最後に別のものを追加すれば
回避することができます。

下記のソースでは、
セレクタの最後をpにすることで
バグを回避しています。


※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper03">
<div id="title03" class="style01">
<p>バグテスト03</p>
</div>
<div id="title03" class="style02">
<p>バグテスト03</p>
</div>
<div id="title03" class="style03">
<p>バグテスト03</p>
</div>
</div>
(cssサンプル)
#title03 p {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title03.style01 p {
background-color:#FF3333;
}
#title03.style02 p {
background-color:#0000FF;
}
#title03.style03 p {
background-color:#339900;
}

上記サンプルのように
pタグなどで囲まれていない場合は
新たに囲む必要はありますが、
コーディング規約などにより、
htmlのソースを修正できない場合以外は
特に問題ないと思います。



また、セレクタの最後が
idとclassの指定で終わっていなければ
問題ないようなので、
セレクタではclassのみの指定にし、
!importantを付けることでも
回避できるようです。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper04">
<div id="title04" class="style01">
<p>バグテスト04</p>
</div>
<div id="title04" class="style02">
<p>バグテスト04</p>
</div>
<div id="title04" class="style03">
<p>バグテスト04</p>
</div>
</div>
(cssサンプル)
#title04 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title04.style01 {
background-color:#FF3333;
}
.style02 {
background-color:#0000FF !important;
}
.style03 {
background-color:#339900 !important;
}

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 12:34 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック