关于 IE6下面修正png后链接失效的补救方法

说起来很郁闷，为了这个问题我弄了一天，大家应该都知道在IE6下png透明图片是无法正常显示的，需要加CSS滤镜修正，但是修正透明后，会引出一个新的问题，就是包含在改图片下的子容器的链接会无法点击到，这是为什么呢？先贴代码

 

html：

<ul class="t_ul"> <li class="active"><span title="content_1">公司简介</span></li> <li><span title="content_2">公司资质</span></li> <li><span title="content_3">产品资质</span></li> <li><span title="content_4">知识产权</span></li> </ul>

CSS:

 

.t_ul{float:left;width:150px} .t_ul li{height:50px; background:url(../images/tab_off.png);_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='style/images/tab_off.png');} .t_ul li.active{height:50px; background:url(../images/tab_on.png) no-repeat; position:relative; z-index:10;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='style/images/tab_on.png');} .t_ul li span{ display:block; padding:18px 30px; font-weight:bold;color:#622c2c;position:relative;z-index:9;}

 

$("#tab span ").css("cursor","pointer"); $("#tab span ").click(function () { // switch all tabs off $(".active").removeClass("active"); // switch this tab on $(this).parent("li").addClass("active"); // slide all content up $(".content").slideUp(300); // slide this content up var content_show = $(this).attr("title"); $(this).parent().css("left","-15px"); $(this).parent().animate({left:"-5px"},100) $("#"+content_show).slideDown(300);

 

关键在于.t_ul li span 中的 这一句：position:relative;z-index:9;

 

因为在实现CSS滤镜后可能png标签容器在Z坐标上会覆盖子标签使其点击不到。这是我理解的，理解有误请大家斧正。