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

最新推荐文章于 2025-08-08 08:17:28 发布

原创最新推荐文章于 2025-08-08 08:17:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #filter #css #class #tabs #function

本文探讨了IE6浏览器中PNG图片透明显示的问题及解决方案，特别是如何避免使用CSS滤镜导致子元素链接不可点击的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

html：

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坐标上会覆盖子标签使其点击不到。这是我理解的，理解有误请大家斧正。