IE67中图片链接无效

今天在群里看到@鸦杀一个问题,IE678的部分点击失效bug 那么就是是在ie6、7,对于以下这样的结构,如果span触发了haslayout,那么图片区域将点击无效

1
2
3
4
5
6
7
<div class="m-demo"> 
<a href="#link">
<span>
<img src="http://7xon9l.com1.z0.glb.clouddn.com/1.jpg" />
</span>
</a>
</div>

1
2
3
.m-demo a,.m-demo a img{width:100px;height:60px;}
.m-demo a{display:block;}
.m-demo a span{zoom:1;}

解决方式是:给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

1
2
3
4
5
6
7
<div class="m-demo m-demo-fix">
<a href="#link">
<span>
<img src="http://img1.cache.netease.com/cnews/2009/11/9/20091109151554a1569.jpg" />
</span>
</a>
</div>

1
2
.m-demo-fix a{cursor:pointer;}
.m-demo-fix a img{position:relative;z-index:-1;}