びっくりした。いやいや、びっくりした。こんな事ってあるんですね。
IE8のみのバグ!?でしょうか。
IE6,IE7だとちゃんと透明になるのに、IE8だけ透明になってくれませんでした。
そうなってしまう条件は明確に分かったので、以後作る時に気をつけようと思います。
条件
タイトルでも言っていますが、
「IE8では、絶対配置した子要素は親要素を透明にしても透明にならない」
のです。
例えば以下のような感じです。
CSS
//親要素 #conts01{ width:800px; height:600px; position:relative; overflow:hidden; background-color:#CCC; opacity:0.5; } //子要素 .sub01{ width:200px; height:300px; position:absolute; top:100px; left:100px; background-color:#f00; }
HTML
テキストテキスト
■IE6・IE7・Firefox・Chrome・Safari
(IE以外のブラウザのバージョンはちゃんと確認していません)
■IE8
解決方法
絶対配置した子要素にも、下記のように同じ透明度を指定するしかなさそうです。
$('#conts01').fadeTo(0,0.5);//親要素 $('.sub01').fadeTo(0,0.5); //子要素
こういったケースは今のところは少ないですが、脱Flashが進んできている昨今、Javascriptでの動きを求められることが増えてくるので、覚えておいて損は無いと思いますよ。