ie6 ie8 的bug:透明引发的鼠标部分事件不触发
时间:2011-03-10 来源:Alucelx
BUG:
当一个absolute/relative positioned 的div层放置于一个img标签之上时,无论这个标签是否绝对定位且z-index值小于div的z-index值,只要当div的背景色透明(除设置alpha通道的透明外),即以下这几种透明方式:
1.不设置任何透明或背景色,天然的透明。
2.background-color:transparent;
3.background-color:colorA; filter: Chroma(color = colorA);
4.filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00123456,endColorstr=#00654321); //ps: IE版的RGBA可以用这个实现, BUG包含此方式的半透明背景色
此时,IE6-IE8下,图片覆盖区域(即使图片无法显示,但是红叉和提示区域也是如此),将对于这个DIV的 鼠标事件 click, DblClick,mousedown,mouseup 均不再有所反应,其他鼠标事件正常。
解决方案:
一、为背景色设置 alpha 通道透明
1.filter:alpha(opacity=0);
2.filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
二、为DIV设置一个完全透明的GIF背景图片,让用户点击到该图片,进而触发事件
1.background-image:url('xx.gif') //ps:此gif为一个 索引色透明 或者 alpha透明 的 全透明GIF图片
思考:
1. 有人或许会说:我给这个DIV加上一个透明的PNG背景图片,IE6下用DD_belatedPNG.fix('') 修复透明,或者用 alphaImageLoader 滤镜 设置并修复PNG的透明问题(即filter:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=crop, src='1.png'),起到和解决方案二相同的效果。
这是不可行的!!
原因:ie8下,这个方案的确可行,但是在ie6下无论怎么修复PNG透明,其仍无法触发事件(IETest下测试结果)。
结语:
有人或许会问,这么做的意义到底何在,我注意点,不把div层放到img上就是了。但是在实际工作中,极有可能会碰到这种情况,如要求在图片提供一个可以用于框选标记图片部分区域(详见 人人网 的相册图片 圈人 功能)。
另:由于操作系统为Win7,无法测试真实情况下的IE6、IE7,以及个人没有安装的IE9,希望有园友能帮忙测试下,谢谢。