CSS IE6 下 PNG背景应用滤镜后 超链接失效的解决办法

PNG背景透明-滤镜使超链接失效的解决方法

PNG背景透明的问题真的是个老掉牙的问题，可对于我这种从来不记代码的人，每每总会成为一个搜索控，哪怕就是检索自己的博客。这不这两天又遇到一个老问题，就是如果PNG图片是作为背景使用，那么IE6加上滤镜实现PNG背景透明后，背景之上的超链接却会全部失效，点无可点。原因，想也明白：就是默认滤镜的层级比伪类内容要高。解决的方法也很简单，比如用套用JS重新定义又或者对CSS做一些必要的修改。可我竟然费了老半天也没想起来其中的对错缘由，所以这次也得留下些许文字记录之，以备不时之需了。

简单的一个办法，给所有内容里的超链接加个相对属性。但是切忌加背景这个层不要再有定位，绝对也好相对也罢，必要的话可以在外面再套一层定位之，不然链接还是会被滤镜遮挡。

 

#a {
position:absolute;
top:*;
left:*;
}
#b {
background:url(*.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png',sizingMethod='image');
}
#b a { position:relative; }
<div id="a">
<div id="b"><a href="#">*</a></div>
</div>

 

 

 

 

还有一个办法，把内容和背景完全分开分属于不同的层，然后区别z-index层级，让内容位于背景层之上。

 

#a {
position:absolute;
top:*;
left:*;
background:url(*.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png',sizingMethod='image');
z-index:100;
}
#b {
position:absolute;
top:*;
left:*;
z-index:200;
}
<div id="a"></div>
<div id="b"><a href="#">*</a></div>