网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

IE6下使用滤镜后链接无法点击的BUG

关注我吧
 2013/8/22 15:10:19 阅读次数:2689

IE6 BUG之使用滤镜后链接无法点击:

IE6下使用滤镜后链接无法点击的BUG

本人遇到了两层滤境在一起导致IE6 下你无法点击链接。首先div中有png,链接a中有png。现在唯一的办法就是把div中的背景移除,并且建一个层来放你这个背景用定位去把背景的位置与原始位置对齐并且设置背景div的z-index:-1;这样就不会影响到ie6的点击。代码如下:(本代码中并无添加pngfix的js,实际操作中你肯定加了才会碰到这个问题)

问题(如果两个层出现pngIE6下则无法点击。当然前题是要使用滤镜)

<html>
<head>
<style>
.left{position:aboslute;left:0;top:10px;height:300px;background:url(png图片);}
.left a{background:url(png图片);position:relative;}
</style>
</head>
<body>
<div class="left">
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
</div>
</body>
</html>

解决方法

<html>
<head>
<style>
.left{position:aboslute;left:0;top:10px;height:300px;}
.left a{background:url(png图片);position:relative;}
.left .bg{position:aboslute;left:0;top:10px;height:300px;background:url(png图片);z-index:-1;}
</style>
</head>
<body>
<div class="left">
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
    <a href="http://www.ok22.org">菜单一</a>
    <div class="bg"></div>
</div>
</body>
</html>

解决方法已经有了。希望大家能看清除上面的不同!这就是解决两层滤镜下不能点击的bug!


有个div的背景是个png的图片,在IE6下使用滤镜使它透明,但它下面的a标签的hover效果就没法显示,且链接也无法点击。
通常的解决方法是:给a标签加个相对定位(position:relative;),但在这里我在a标签上有个绝对定位(position:absolute;),这样的话该怎么解决的呢?

办法有两种:
1、在使用滤镜的容器外面再加上一个容器,这个容器加上绝对定位。a标签上加相对定位的属性(position:relative)就可以点击了。

2、使用IE6下PNG图片透明插件DD_belatedPNG,用法很简单,和jquery的语法相似:
首先是引用这个js

<script type="text/javascript" src="http://www.candoudou.com/js/DD_belatedPNG.js"></script>

然后再来引用它,找到需要透明的那个标签的class或id名称(可以跟多个class或id名),如:

<script type="text/javascript">
   DD_belatedPNG.fix('.trunLeft,.jicon,.per_li li,.navf a,.per_info .add, .per_info .intr');
</script>

PNG图片透明插件DD_belatedPNG的下载地址:DD_belatedPNG.js

产生这个bug的原因可能是DXImageTransform.Microsoft.AlphaImageLoader改变了容器的层级,其定位属性也能改变元素层级。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭