CSSで半透明にできるOpacityプロパティとIEでの問題について

ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。
ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。

要素を透明化する CSS プロパティ

CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。

CSS3での透明化

1	opacity:0.7;

0 が透明で 1 が不透明、0～1 の値を指定する。

これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。

IEでの透明化

1 2	filter: alpha(opacity=70);        /* ie 6 7 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */

IEの透明度は0～100の％で指定する。

この他、Firefox や Safari の古いバージョン用の記述を加えて、最終的に次のような指定になった。

クロスブラウザでの透明化

1 2 3 4 5

opacity:0.7; filter: alpha(opacity=70);        /* ie lt 8 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */ -moz-opacity:0.7;                 /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7;              /* Safari 1.x */

IE6 以前の記述方法もあったが、これ以上は良いだろう。

参考
Coder's Note - 指定した要素を半透明にできるopacity（IEでも使える）
codecanyou - Crossbrowser Opacity

IE でテストしてみる・・・・？・・・・が、なぜか透明化しない。

IE で filter/opacity を動かすためには

さらにネットで調べると IE で filter/opacity のプロパティを動かすためには、width や heigth などの位置情報が無いと動かない。つまり、currentStyle.hasLayout が False だと透明にならないそうだ。これを簡単に動かすには、無害な設定の zoom:1 を加えると良いようだ。

クロスブラウザでの透明化（改善）

1 2 3 4 5 6

opacity:0.7; filter: alpha(opacity=70);        /* ie lt 8 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */ -moz-opacity:0.7;                 /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7;              /* Safari 1.x */ zoom:1;

参考
Joseph Scott - CSS Opacity in Internet Explorer (IE)
Enjoy*Study - IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。

試してみると・・・、透明化した！！。ここまで書かないと動かないなんて、クロスブラウザ設定は大変だな～。でも、こんなことで悩むのはヤダな。

５年くらい前の情報を元にしたネタで、申し訳ありません。