技術メモ:IE8以前のfilter属性に関して | Konjac日記

Konjac日記

僕自身の備忘録的な内容や思うところの捌け口

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には困ったもんだ。