众所周知,IE6 + Png 有透明效果显示的Bug。
这个问题有很多达人提出了解决方案,其中包括广为流传的fixpng.js
但很少有人提到,在使用fixpng.js进行修正之后,当点击Png图片时,IE6报错。
如果关闭了IE中的允许脚本调试选项,也许这个错误不会在网页上弹出窗口提示,但经测试证明,如果置之不理,在神奇的IE6中,错误可能象癌细胞一样转移,最终在你想象不到的地方蹦出来,产生致命的影响。
因此,解决它,而不是回避它,才是正确的态度。
以下是我的解决方案:
网页上的Png图片可以分为两类,一种是单纯用于显示的,另外一种可能被封装在某些元素之内,这些元素要能捕捉Click事件,激发某些网页内的数据操作或者打开新网页。
1)单纯用于显示的Png图片
将图片封装在<span>中,定义它的类标识为pngSpan,如:
<span class="pngSpan"><img src="xxx.png" class="fixpng" /></span>
用Javascript拦截所有对这些图片的点击:
$(".pngSpan").click(function(){
return false;
});
注:以上$(...)是Jquery框架下的用法,在别的框架下写法应相应调整。
如上,则点击事件被封装元素<span>提前捕获,并强行中止,png图片元素无法捕获点击事件。
2)被封装在待点击元素内的Png图片
幸运的是,对于一般的Html元素, 在IE6下点击事件是先被外部元素捕捉到,之后才传递到内部的Png图片元素。在这种情况下,只需要注意在click事件处理完毕后不要忘记以“return false;” 语句结尾,就可以自然截断点击事件向Png图片传递。如:
<div id="x_div"><img src="xxx.png" class="fixpng" /></div>
相应的Js代码为:
$("#x_div").click(function(){
...... // 事务处理代码
return false; //不可省略
});
对于<a>元素,情况有所不同,点击事件是先被其内部的图片元素捕获,之后才触发<a>元素打开新链接的操作,因此如果如方法1那样用<span class="pngSpan"></span>来封装Png图片,则<a>元素无法正常打开新连接。解决方法是给所有封装了Png图片的<a>元素加上类标识'pngA',再用Javascript来控制打开连接的工作:
Html
<a class="pngA" href="XXX.html"><img src="xxx.png" class="fixpng"/></a>
Javascript
$(".pngA").click(function(){
if ($(this).attr("target") == "_blank")
window.open($(this).attr("href")); //在新窗口中打开连接
else
window.location=$(this).attr("href"); //在原窗口中打开连接
return false; //不可省略
});
以上,总计约10行Js代码,就能解决这个Bug了。