背景色をrgbaとrgbで2重指定するときのIE地雷

はじめに結論

CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介．

結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります．

Goodパーツ

こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと．

.someClass {
  background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */
  background: rgba(128,128,128,0.8);
}

両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です．

Badパーツ

こうやるとIE6-8で背景色がうまく適用されずに撃沈します．

.someClass {
  background-color: rgb(128,128,128);
  background-color: rgba(128,128,128,0.8);
}

両方ともbackground-colorにすると，IE6-8で背景色が設定されていない状態になります．

IE6-8でrgbaが解釈できないときに，前のrgbの指定も壊してしまうんでしょうかね．とどのつまりお馴染みのIE地雷なので，そういうものだと割り切りましょう．

新発見でした

個人的にbackgroundプロパティばっか書いていたので，この細かいところは気づいてませんでした(;´-`)　今回は仕事案件でIEが悲鳴をあげていたので気づいた次第．

余談: この地雷がIE8では修正されてるというような情報もあったのですが，手元のWin7+IE8(v8.0.7601.17514)では同様の症状が再現されました．IE8にも影響すると思っておいたほうが安全そうです．

---