IE8だと絶対配置した子要素は親要素を透明にしても透明にならない件

びっくりした。いやいや、びっくりした。こんな事ってあるんですね。
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での動きを求められることが増えてくるので、覚えておいて損は無いと思いますよ。