IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に)
element.style.filter = 'alpha(opacity=50)';
だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。
なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない)
script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のprotptype.jsでも)
が、Effect.Opacity の initialize をみると下記のような処理があり、どうもこれで上記の現象を回避しているようです。(ためしに同じスタイルの要素に対してEffect.Fadeを実行してみたところ、ちゃんとフェードアウトしました)
if(/MSIE/.test(navigator.userAgent) &&
!window.opera && (!this.element.currentStyle.hasLayout))
this.element.setStyle({zoom: 1});currentStyle.hasLayout が false だと、filter: alpha(opacity=xx)は効かないようです。
で、currentStyle.hasLayoutがtrueになるのは、
MSDN hasLayout Propertyによると、下記のようになっており、script.aculo.usでは一番影響のないzoom:1を使って回避しているようです。
| CSS property | Value |
| display | inline-block |
| height | any value |
| float | left or right |
| position | absolute |
| width | any value |
| writing-mode | tb-rl |
| zoom | any value |
