a包含 导致超链接失效的bug

本为了省事，却费了更多的事情！记住了，a标签下包含span再包含img，img会失效，a标签会失效！

出处：http://blog.sina.com.cn/s/blog_50042fab01017oyb.html

http://www.qttc.net/201210227.html 

由于我的span需要隐藏一部分超出尺寸的图片，所以必须触发span的layout。

所以我把在span里加上position：relative; z-index：-1，让它置于的下层。但是图片会被放在页面最下层的背景图下面，只好找一个最靠近sapn的上级父元素设置，position：relative; z-index：33(大于背景图的层次);这样图片才能在下面，又在页面背景图上面。

一. bug症状:
      点击包含图片的超链接, 页面并不跳转, 若图片与超链接之间存在空白, 点击空白处, 页面会跳转; 但却会响应鼠标事件.
      如果A标签包含SPAN标签，SPAN标签再包含IMG标签，那么如果给SPAN标签display:block，并赋予width与height值将会导致IE6、7、8下点击图片无法链接。

二. bug出现的场景
      a元素内嵌套一层或多层内联元素, 最终的内联元素包含一个img元素, 这时, 如果触发了a元素以内的, img元素的任何一个父元素的hasLayout, 那么超链接将失效.

三. 例子
css:
a {
   display: block;
   width: 100px;
   height: 100px;
  
   cursor: pointer;
}
a span {
  
   display: block;
   width: 100%;
   height: 100%;
}
a span img {
   vertical-align: middle;
}
四. 解决办法
     1. 不触发span元素的hasLayout;
     2. 将img元素进行定位(不设置位置属性), 并将其z-index设置为负数(这个解决方法是基于这样一种判断:
     点击图片区域时, 链接无效, 若图片与链接之间存在空白, 点击空白区则是有效的, 所以, 可以认为是图片挡在a元素上面, 我们在点击时, 实际上点的是图片, 我们只要让a元素显示在最上面就可以了).

最好就不要这样使用了！费点事！

五. 我的其他尝试
     1. 将span元素设置为display: inline-block;   (结果无效)
     2. 触发img元素的hasLayout; (依然无效)

六. 我的思考
    这个bug只在IE6,  7下出现,  且都是在img元素的父元素被触发了hasLayout的情况下, 所以, 我认为, 该bug应该与IE下的hasLayout有关.

附: 由于IE6, 7是"主瘤"浏览器, 被影响面较大, 必须解决

btw：设置为display: inline-block;, 也会触发元素的layout.