2012-10-23

IE浏览器A标签下包含img诡异BUG

看来我真的是跟IE啃上了，这会不只是IE6，就连IE7、IE8都发现有问题。先来阐述下事情缘由：项目里有一个页面其中一排图片是被A标签包含着的，正常情况下点击图片会链接到目标地址，可测试发现在IE下无法正常链接到目标地址。

于是我自己写了一个Demo：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IE下诡异BUG</title>
    <style type="text/css">
      span {display:block;width:100px;height:100px;}
    </style>
  </head>
  <body>
    <a href="https://www.qttc.net" target="_blank">
      <span><img src="5.jpg" width="100" /></span>
    </a>  
  </body>
</html>

如以上Demo，样式是照着项目写的。使用其它浏览器测试均能链接过去，唯独在IE6、7、8下不能连接。

点击没反应：IE浏览器

full

但鼠标移动到图片上，状态栏是可以显示出目标地址

full

我在A添加一个onclick事件

<a href="https://www.qttc.net" onclick="alert(333);"  target="_blank">
  <span><img src="5.jpg" width="100" /></span>
</a>

运行IE所有浏览器都能弹出

full

开始怀疑是样式的问题导致IE下点击图片不能链接，虽然我一开始也不太愿意去判断是样式问题导致链接失效，但感觉问题基本就出现在那了。

第一步，去掉img外层的span标签，结果IE下点击生效。由此，判断是span标签导致

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IE下诡异BUG</title>
    <style type="text/css">
      span {display:block;width:100px;height:100px;}
    </style>
  </head>
  <body>
    <a href="https://www.qttc.net"  target="_blank">
      <img src="5.jpg" width="100" />
    </a>  
  </body>
</html>

第二步，把SPAN标签恢复回去，仔细看了一下SPAN标签的样式，无非就display,width和height。难道问题出现在这三个样式上？我试着把span标签的width，与height去掉，结果问题解决

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IE下诡异BUG</title>
    <style type="text/css">
      span {display:block;}
    </style>
  </head>
  <body>
    <a href="https://www.qttc.net"  target="_blank">
      <img src="5.jpg" width="100" />
    </a>  
  </body>
</html>

由此判断出：如果A标签包含SPAN标签，SPAN标签再包含IMG标签，那么如果给SPAN标签display:block，并赋予width与height值将会导致IE6、7、8下点击图片无法链接。

这个bug有点隐蔽，不好排查，因为很少会因为样式的问题引发功能失效，但Chrome、FireFox等主流浏览器以及IE9都不会发现这个bug。

琼台博客

IE浏览器A标签下包含img诡异BUG

推荐文章