IE6,IE7下设置透明度Opacity的Bug
时间:发生在 2010年01月6日 的那天 去打手印哦 (3)
今天在写一个跨浏览器的setOpacity设置HTML元素的透明度函数的时候,函数代码如下:
if (elem.filters) {
elem.style.filter = "alpha(opacity="+l+ ")";
} else {
elem.style.opacity = l / 100;
}
}
//Example:
οnlοad= function(){
setOpacity(document. getElementById( "div"),20);
}
发现在IE6,IE7下总是没有效果,郁闷了一些时间,后来经过测试,无意中设置了元素的width和height样式,IE6,IE7出来效果 了。惊奇了一下,之后又测试了只声明width或者只声明height的情况下,也有效果。现在发现问题了,可能是IE6、7下的Bug,也或者 Microsoft有意这样设置。
问题找到了也就好对症下药了,可以按照这样的思路来解决这个问题:第一是根据需要在css里声明width或者 height;第二是在Javascript里动态获取HTML元素潜在的width或者height,重新给它的width或者height赋值,这样 就相当于“显示”声明了它的width或者height。下面是获取HTML元素潜在width和height的两个方法:
//获取HTML元素最终样式的辅助函数
getFinalStyle: function(elem, css){
if (window.getComputedStyle) { //W3C
return window.getComputedStyle(elem, null)[css];
} else if (elem.currentStyle) { //IE
return elem.currentStyle[css];
} else {
return elem.style[css];
}
},
height: function(elem){
//首先检查HTML元素是否隐藏,因为display='none'的元素是获取不到高度和宽度的
if ( this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetHeight || elem.clientHeight;
} else {
//获取隐藏掉的函数的高度,先让它显示,获取到高度之后再隐藏,下同
elem.style.display = "block";
var h = elem.offsetHeight || elem.clientHeight;
elem.style.display = "none";
return h;
}
},
width: function(elem){
if ( this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetWidth || elem.clientWidth;
} else {
elem.style.display = "block";
var w = elem.offsetWidth || elem.clientWidth;
elem.style.display = "none";
return w;
}
}
}
通过上面Style对象的height和width就可以获取任何HTML元素的height和width。这样就可以在IE下在给元素设置透明度之前,获得它的width和height并赋值给它的style.height或者style.width:
if (elem.filters) {
//在IE下给elem的height重新赋值
elem.style.height=Style.height(elem, "height")+ "px";
elem.style.filter = "alpha(opacity="+l+ ")";
} else {
elem.style.opacity = l / 100;
}
}
利用上面修改过后的方法,在IE6,IE7下运行正常了,问题得到了解决。不过值得说明的是,这个问题在IE8版本中似乎得到了修正,没有显示声明width或者height也都可以设置透明度,这是件好事。