びっくりした。いやいや、びっくりした。こんな事ってあるんですね。
IE8のみのバグ！？でしょうか。
IE6,IE7だとちゃんと透明になるのに、IE8だけ透明になってくれませんでした。
そうなってしまう条件は明確に分かったので、以後作る時に気をつけようと思います。
条件
タイトルでも言っていますが、
「IE8では、絶対配置した子要素は親要素を透明にしても透明にならない」
のです。
例えば以下のような感じです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//親要素 #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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- jQUery読込み --> <script src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(function() { //親要素に半透明を指定 $('#conts01').fadeTo(0,0.5); }); </script> </head> <body> <div id="conts01"> <div class="sub01">テキストテキスト</div> </div> |
■IE6・IE7・Firefox・Chrome・Safari
(IE以外のブラウザのバージョンはちゃんと確認していません)
■IE8
解決方法
絶対配置した子要素にも、下記のように同じ透明度を指定するしかなさそうです。
|
1 2 3 4 |
$('#conts01').fadeTo(0,0.5);//親要素 $('.sub01').fadeTo(0,0.5); //子要素 |
こういったケースは今のところは少ないですが、脱Flashが進んできている昨今、Javascriptでの動きを求められることが増えてくるので、覚えておいて損は無いと思いますよ。