JavaScript使IE6下png背景透明对单击事件的影响
今天看到一篇不错的文章与大家分享:
原文：http://www.zhangxinxu.com/study/200908/js-ie6-png-click-nouse.html#nogo
JavaScript使IE6下png背景透明对单击事件的影响
type类型为image的input框
此JavaScript对type为image类型的input的png背景透明并不支持，所以这里用做对照处理，表明下面的png图片受JavaScript代码影响已经背景透明。
此JavaScript对type为image类型的input的png背景透明并不支持，所以这里用做对照处理，表明下面的png图片受JavaScript代码影响已经背景透明。
<input class="zxx_test_png" type="image" src="../image/png_test.png" _mce_src="../image/png_test.png" width="128" height="128" />
background-image背景透明内部标签单击事件不响应
如果您的浏览器是IE6或者内核使用的是IE6，点击“点击我”是没有反应的。这里“单击我”外层DIV标签的背景图片就是示例的png图片，部分背景是透明的，其内部的a标签（其他标签亦是如此）无法响应单击时间，像是被什么东西覆盖了。
如果您的浏览器是IE6或者内核使用的是IE6，点击“点击我”是没有反应的。这里“单击我”外层DIV标签的背景图片就是示例的png图片，部分背景是透明的，其内部的a标签（其他标签亦是如此）无法响应单击时间，像是被什么东西覆盖了。
<div style="width:128px; height:128px; padding-bottom:10px; text-align:center; background:url(../image/png_test.png) no-repeat; float:left;" _mce_style="width: 128px; height: 128px; padding-bottom: 10px; text-align: center; background: url(../image/png_test.png) no-repeat; float: left;"> <a href="#nogo" _mce_href="#nogo" style="display:inline-block; padding:2px 6px; margin-top:30px; background:white; border:1px solid #333333;" _mce_style="display: inline-block; padding: 2px 6px; margin-top: 30px; background: white; border: 1px solid #333333;" onclick="alert('点得我好痒啊！');">单击我</a></div>
background-image如果为非含透明背景的png图片则响应单击事件
这里的背景图片是个普通的gif图片，与上面的代码结构是一致的，差别就在于背景图片的不同，结果这里可以响应单击事件。单击右边的“点击我”，会弹出“点得我好痒的”提示框，说明这里的内部标签响应了单击事件。这就说明了一个标签如果其背景图片为含透明背景的png图片，在IE6下，如果通过css 滤镜，或JavaScript使其背景透明，则其内部的标签将无法响应单击事件。
这里的背景图片是个普通的gif图片，与上面的代码结构是一致的，差别就在于背景图片的不同，结果这里可以响应单击事件。单击右边的“点击我”，会弹出“点得我好痒的”提示框，说明这里的内部标签响应了单击事件。这就说明了一个标签如果其背景图片为含透明背景的png图片，在IE6下，如果通过css 滤镜，或JavaScript使其背景透明，则其内部的标签将无法响应单击事件。
<div style="width:128px; height:128px; text-align:center; background:#34538b url(../image/pixel.gif); float:left;" _mce_style="width: 128px; height: 128px; text-align: center; background: #34538b url(../image/pixel.gif); float: left;"> <a href="#nogo" _mce_href="#nogo" style="display:inline-block; padding:2px 6px; margin-top:30px; background:white; border:1px solid #333333;" _mce_style="display: inline-block; padding: 2px 6px; margin-top: 30px; background: white; border: 1px solid #333333;" onclick="alert('点得我好痒啊！');">单击我</a></div>
单击我解决方法——覆盖
所谓覆盖是指用一个外部的标签定位到此内部点击失效的div层上。例如这里，可以将"单击我"这个a标签卸载覆盖在含透明png背景图片的DIV之外，用绝对定位或margin复制法定位到想要的区域或是用一个外部透明层覆盖在“单击我”这个区域上。
由于IE6下有时会出现绝对定位里面元素不可见的奇怪bug，所以我建议用margin负值实现定位效果。本例子中我就是将点击的a标签提到div之外，margin负值(margin-left:-100;)定位到此div之上的，如下面示例代码。
所谓覆盖是指用一个外部的标签定位到此内部点击失效的div层上。例如这里，可以将"单击我"这个a标签卸载覆盖在含透明png背景图片的DIV之外，用绝对定位或margin复制法定位到想要的区域或是用一个外部透明层覆盖在“单击我”这个区域上。
由于IE6下有时会出现绝对定位里面元素不可见的奇怪bug，所以我建议用margin负值实现定位效果。本例子中我就是将点击的a标签提到div之外，margin负值(margin-left:-100;)定位到此div之上的，如下面示例代码。
<div style="width:128px; height:128px; padding-bottom:10px; background:url(../image/png_test.png) no-repeat; float:left;" _mce_style="width: 128px; height: 128px; padding-bottom: 10px; background: url(../image/png_test.png) no-repeat; float: left;"></div><a href="#nogo" _mce_href="#nogo" style="display:inline-block; float:left; padding:2px 6px; margin-top:30px; margin-left:-100px; background:white; border:1px solid #333333;" _mce_style="display: inline-block; float: left; padding: 2px 6px; margin-top: 30px; margin-left: -100px; background: white; border: 1px solid #333333;" onclick="alert('点得我好痒啊！');">单击我</a>
