ie6 filter png a 链接不可点击

最新推荐文章于 2021-06-09 13:43:40 发布

xiongzhengxiang

最新推荐文章于 2021-06-09 13:43:40 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xiongzhengxiang/article/details/9293867

版权

CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

问题

png 24 要想在ie6下显示半透明效果，必须借助ie 的filter 功能。而在filter 节点下的子节点，如果有a链接，那么点击不会有任何反应。怎样让这种情况下的a链接正常反应呢？

解决思路：

初看了下ie filter 的原理，上述问题产生的原因是 filer 节点下的子节点，z-index 小于filer 节点。那么我们想办法让a便器节点的z-index 大于filter 节点就行

how？

一个元素的z-index 层级，与实际的层级结构并没有关系，z-index 总是去想上寻找，找到第一个position 不为static 的节点，来作为stacking context root。

这样，情况就有两种，

一）filter 节点自身不是定位元素，那么，简单的赋予a 便签定位属性，就可以让a 可点击了（显然a便签z-index 会大于filter，因为a和filter 拥有同一个stacking context root,而a在filter之后定义的）

<style>
.filter{

_background:none;
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.baifubao.com/resource/global/images/logo.png",sizingMethod='scale');width:100px;height:100px;
}
.filter a{position:relative;display:block;width:100px;height:100px;}
</style>
<div class="filter">
    <a href="www.baidu.com">百度一下</a>
</div>

二）filter 节点自身是定位元素，那么子节点的层级，不可能超越filter 节点的层级。解决办法是把filter 节点拆解为两个div节点，外面的节点赋予定位属性，里面的节点使用filter特性，这样a便签再使用定位属性，就可以让自己的z-index 属性高于图像的那个节点了

<style>
.filterWrap{
    position:relative;
    width:100px;
    height:100px;
}
.filter{
 _background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.baifubao.com/resource/global/images/logo.png",sizingMethod='scale');width:100p;height:100px;
}
.filter a{position:relative;display:block;width:100px;height:100px;}
</style>
<div class="filterWrap">
    <div class="filter">
        <a  href="www.baidu.com">百度一下</a>
    </div>
</div>

参考：

http://bbs.blueidea.com/thread-2956285-1-1.html

http://www.ipmtea.net/css_ie_firefox/201106/11_466.html