親子関係にある要素にopacityを適用した場合のブラウザ間による動作の違いについて。
この違いはbackground-colorではなく、border-colorのopacityの差異についてまとめたものです。
以下のような階層構造の要素があるとします。
<div class="test outer"> <div class="test inner"> <div class="test core"></div> </div> </div>
これに以下のCSSを適用します。
*{margin:0;padding:0;}
body{background-color:#fff}
.test{
background-color:blue;
border: 10px solid red;
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
.test.outer{
margin:10px;
width:60px;
height:60px;
}
.test.inner{
width:40px;
height:40px;
}
.test.core{
width:20px;
height:20px;
}
上記の表示結果:
要素の background-color を transparent にしてみる
例).test{background-color:transparent}
上記CSSで設定した要素のbackground-colorを透明にするか、あるいは削除すると以下のような表示になります。
要素のbackground-colorを指定しない場合の表示結果:
IEでは個々に設定されたopacityで表示される。
つまり、親子関係はopacityに反映されない。
bodyのbackground-colorを変えてみる
body{background-color:#000}
bodyのbackground-colorを黒色に設定すると以下のような表示になります。
bodyのbackground-colorに黒色を指定した場合の表示結果:
図を見て分るとおり、Chromeでは明らかに色がおかしくなる。
このような違いがあることを知っておかないとJavascriptやCSSでborderとopacityが関係したトリックを行う際にハマるので注意。
IEも他のブラウザと同じように見せる方法はないか試してみた
CSSで行うのは面倒なのでjQueryを使用して以下のように処理してみた。var $w = $(document.body),
opacity = 0.8,
bw = 10,
hw = 100;
for(var i = 0; i < 5;i++){
var $x = $('<div>').css({
opacity:opacity,
border:'10px solid #ff0000',
height:hw,
width:hw
}).appendTo($w);
hw -= bw*2;
$w = $x;
if($.browser.msie) opacity *= opacity;
}
表示結果:
IEの場合だけ以下のように処理する。
if($.browser.msie) opacity *= opacity;
上記でopacityを「0.8」としたのはサンプルを多くしたかったため。
「恐らくこれでいけるだろう」と安易に考えたが...
どうもIEでは端数を切り捨てているっぽい。
同じように表示させるのは無理かもしれない。
私はここで挫折。
