晒すシリーズ。IE6でクラスが読まれない！事件

好評かどうか分からんですけど、晒すシリーズ。の２回目です。初心者のかたへ、こんなWEB屋さんになっちゃダメよ。

いつものように、うちの新人くんがコーディングして、各ブラウザでブラウズのデバック作業に入ります。
しかしそこはWEBの世界。そんなに甘くはないのです！案の定、泣きついてきましたね。

「すみませ〜ん。なんかIEで表示がおかしいんですぅ。」と、別に可愛くないが、本人は精一杯甘えた声を出してきてるんですよ。
「あぁ？なんや？おかしいって、どうおかしいんや？んなもんで分かるか！」と心で思いながら、「どれ・・・」と、一応確認する。

divで括ったblockが３つほど並んでいるけど、最初のblockだけ背景が指定されている。
本人曰く、「あとの２つにはそれぞれ違う背景なんですけど、なんでかIE6で背景がなくなってるんですぅぅ。」と特に可愛くない声を出してくるし…。

「しょうがねぇなぁ…」と、ソースを確認すると。
こんな感じ。idをclassで切り分け

問題のHTML

  <div id="wrapper">
   <div id="title" class="style1">
      <p>hogehoge</p>
   </div>
   <div id="title" class="style2">
     <p>hogehoge</p>
   </div>
   <div id="title" class="style3">
    <p>hogehoge</p>
   </div>
</div> 

問題のCSS

#title{
width:200px;
background-color:#CCCCCC;
color:#FFFFFF;
}
#title.style1 {
background-color:#FF3333;
}
#title.style2 {
background-color:#0000FF;
}
#title.style3 {
background-color:#339900;
}

あれ？まちがってないよね？んん？え〜？。

これはマズいぞ。新人が見てる手前パニッくったら威厳に関わる。内心「え〜〜〜〜〜〜なんで？」と思いながら、カチャカチャやってみる。
クロスブラウザでは、無問題なので、IE6のバグは間違いない。
一つのidでclassを切り分けているが、最初のclass以降のclassは読んでいないご様子。なので、一か八かでCSSを下記のように書いてみる。

一応の解決をみたCSS

#title p{
width:200px;
background-color:#CCCCCC;
color:#FFFFFF;
}
#title.style1 p{
background-color:#FF3333;
}
#title.style2 p{
background-color:#0000FF;
}
#title.style3 p{
background-color:#339900;
}

お、いけてるじゃん。一応は先輩の威厳は保てたっぽいが、本当にこんなソースでいいのかしら？
あ、style2. style3にimportantでもいいのかもしれんです。間違っとったらゴメンね。新人君。

追記：

イヤ、イヤ、イヤ。ここまで書いて何なんですけど。お風呂に入っているときに気が付いた。これって、おもいっきり間違ってますね。
最初のHTMLですがね、idが重複しとるやんけ！アカーン！！
同一文書の中にidセレクタは複数箇所に使っちゃいかんのです。

よって、HTMLはこのように書き直し。

修正版HTML

  <div id="wrapper">
   <div id="title">
      <p class="style1">hogehoge</p>
      <p class="style2">hogehoge</p>
      <p class="style3">hogehoge</p>
   </div>
</div> 

んで、CSSはこうだな。

#title p{
     width:200px;
     background-color:#CCCCCC;
     color:#FFFFFF;
     font-size: 12px;
}
#title p.style1 {
    background-color:#FF3333;
}
#title p.style2 {
    background-color:#0000FF;
}
#title p.style3 {
    background-color:#339900;
} 

これなら、IEでどうしたこうした・・・ってなくなるんじゃね？
う～ん。晒しとるね。先輩の威厳失墜。ガクッ

Share/Bookmark

2 Responses so far.

1. kz より:

   2010年4月14日 2:30 AM

   #title ツッコもうと思ったのに追記されてて残念です。
   かわいい新人ちゃんは紹介してください。

   返信
   • KRUZ より:

     2010年4月14日 10:04 AM

     ふふふっ。あぶないあぶない。すぐにテンパるところが、引き出しの少なさを露呈しております。だから、晒すシリーズなのですwwww
     かわいい新人は、女の子ならよかったんですけどね…。
     今後とも、なま暖かい目でご覧くださいませww。

     返信