a标签点击跳转失效--IE6、7的奇葩bug

 

一般运用a标签包含img去实现点击图片跳转的功能，这是前端经常要用到的东西。

今天遇到个神奇的bug：如果在img上再包裹一层div，而且div设置了width和height，则图片区域点击时，无任何响应。

出现这个bug的条件是：1.a标签下包含div这样的块元素
　　　　　　　　　　　2.块元素必须设置width和height属性值

　　　　　　　　　　　3.该块元素下包含img

 

解决方法:改结构或者让三个条件的某一个失效就可以了

 

 

2015-05-22 补充

1.就算将a标签设置为display:block;也同样失效
2.只要不在img覆盖的区域，a标签点击还是有效的
3.之所以这样用，是想更多地以取巧的方式，利用a标签的默认功能，实现简单的跳转，而不用写多余的js代码
4.可以利用:hover伪类，进行样式的切换（这在低版本浏览器下，是最高效，直接的方式）
5.在高级浏览器，将a标签display:block;，从意义上来说，不存在太大的问题（当然，裸css还是相当的惨）