IE6 链接无法点击的修复方法

来源:互联网 发布:苏格兰折耳猫 知乎 编辑:程序博客网 时间:2024/05/16 10:54

今天遇到一个IE6/7上链接失效的bug: 

    a元素内嵌套一层或多层内联元素, 内联元素再包含一个img元素, 这时, 如果触发了a元素里这个内联元素的hasLayout, 那么超链接将失效.

html:

<a href="#"><span><img src="#" alt="msg" /></span></a>

css

a span {float: left}


只要触发了span的hasLayout(float:left),就会出现此bug

解决方案:

1、避免这样子嵌套:a>span>img,直接把A链接放到img的外边

2、不要触发内联元素的hasLayout

3、将img元素进行定位(不设置位置属性), 并将其z-index设置为负数(这个解决方法是基于这样一种判断:
   点击图片区域时, 链接无效, 若图片与链接之间存在空白, 点击空白区则是有效的, 所以, 可以认为是图片挡
   在a元素上面, 我们在点击时, 实际上点的是图片, 我们只要让a元素显示在最上面就可以了).(参考http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/)



原创粉丝点击