IE8以前のalpha属性に関して。
さて、以下のhtmlソース。どう動くだろうか。
<html>
<style>
.filter{
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
}
.filter2{
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
width:200px;
}
.pos{
position:relative;
}
</style>
<div class="filter"><img src="./hoge.jpg"></div>
<div class="filter2"><img src="./hoge.jpg"></div>
<div class="filter2"><img class="pos" src="./hoge.jpg"></div>
</html>
Firefoxだとすべての画像が半透明表示される。
Chromeでも同じく。
ちなみにIE9でも同じく。
だが、IE8以前のブラウザだと不透明、透明、不透明になってしまう。
http://msdn.microsoft.com/ja-jp/library/Cc410168曰く、divタグにfilterをかける場合、幅、絶対位置などの属性が必要になるのだそうだ。
ここまでは何となく分かる。いや、分からんな…(-_-;)
ここからが問題。ここからが、というかここからも、だな。
そのdivの子要素にposition:relativeが入るとfilterが効かない。
もっと言うと子要素にstatic以外のposition属性があると親要素にもstatic以外のposition属性が必要。
親要素:static/子要素:relative→×
親要素:relative/子要素:relative→○
親要素:static/子要素:static→○
親要素:absolute/子要素:relative→○
親要素:relative/子要素:static→○
仕様とは言え、IEには困ったもんだ。