IE6下png背景不透明问题的综合拓展

转载自：http://www.zhangxinxu.com/wordpress/?p=14

注意事例中：

background-image背景透明内部标签单击事件不响应

<div style="width:128px; height:128px; padding-bottom:10px; text-align:center; background:url(../image/png_test.png) no-repeat; float:left;">

    <a href="#nogo" style="display:inline-block; padding:2px 6px; margin-top:30px; background:white; border:1px solid #333333;" οnclick="alert('点得我好痒啊！');">单击我</a>

</div>

div标签包含住a标签；

解决方法——覆盖

所谓覆盖是指用一个外部的标签定位到此内部点击失效的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;"></div>

<a href="#nogo" style="display:inline-block; float:left; padding:2px 6px; margin-top:30px; margin-left:-100px; background:white; border:1px solid #333333;" οnclick="alert('点得我好痒啊！');">单击我</a>