ブラウザ間によるborderのopacityの違い:humming bird

親子関係にある要素に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;
}

表示結果: