2011年11月28日月曜日

「IE6でクラス切り替えによる画像のロールオーバーを行う場合はIDセレクタを指定しちゃいかんぜよ」というお話

久々にどっぷりと深みにハマったので、記録を残しておこうと思います。

やりたかった事は、チェックボックス風のON、OFF画像をクリック時とマウスオーバー時に適宜変更して表示するだけだったんですけどねぇ。

さて、当初は以下のようなコードを書いてました。

<html>
<head>
<style>
<!--
    a#hogehoge.check_off
    {
        background-color : blue;
        color : black;
    }
    a:hover#hogehoge.check_off
    {
        background-color : black;
        color : white;
    }
    a#hogehoge.check_on
    {
        background-color : green;
        color : black;
    }
    a:hover#hogehoge.check_on
    {
        background-color : red;
        color : white;
    }
//-->
</style>
<script type="text/javascript" >
    function change_class(elm){
        if( elm.className == "check_on" ){
            elm.className = "check_off";
            elm.innerHTML = "今はcheck_offだよ";
        }
        else{
            elm.className = "check_on";
            elm.innerHTML = "今はcheck_onだよ";
        }
    }
</script>
</head>
<body>
    <a href="#" id="hogehoge" class="check_on" onclick="change_class(this);">
        クリックを!
    </a>
</body>
</html>
※テストコードなので背景色の変更で書いていますが、背景画像でも同様。

hogehoge というエレメントに対して、check_on クラスの場合に、通常なら背景が緑色で文字は黒色、マウスオーバー時なら背景が赤色、文字は白色に指定しています。
また、check_off クラスの場合は、通常なら背景が青色で文字は黒色、マウスオーバー時なら背景が黒色、文字は白色に指定しています。
ところが、上記コードのページを IE6 で見ると「クリックを!」の背景もテキストもデフォルト色で表示されて、マウスオーバーでも色が全く変わりません。
そして一度クリックすると check_offクラスで指定している背景が青色、文字は黒色になり、マウスオーバーで背景が黒色、文字は白色になります。さらにクリックすると最初と同じデフォルト色に戻ってしまいます。
どうも、check_on クラスの指定がまるっきり無視されてるような感じです。

これを、IE7以降や FireFox で見ると、ちゃんと指定通りの色で表示されるんですよねぇ。

この対処方法をまったく思いつけず一旦は、
    <a href="#" id="hogehoge_on" class="check_on">クリックを!</a>
    <a href="#" id="hogehoge_off" class="check_off">クリックを!</a>
と2つエレメントを用意して表示・非表示を切り替えるという方法を取ろうと、書き換えまで行ってたのですが・・・
なんとか対応策を見つけました。

idセレクタ #hogehoge がまずかったようで、以下のようにclassセレクタだけを使う事で回避できました。

    a.check_off
    {
        background-color : blue;
        color : black;
    }
    a:hover.check_off
    {
        background-color : black;
        color : white;
    }
    a.check_on
    {
        background-color : green;
        color : black;
    }
    a:hover.check_on
    {
        background-color : red;
        color : white;
    }

気付けば「な~んだ」という話なんですけどねぇ・・・
それに元々不要な idセレクタまで使ってたのがいかんのかなぁと思いつつも、IE6だけで問題が起こる訳で、やはりバグなんですかねぇ。