背景色を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にも影響すると思っておいたほうが安全そうです.