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

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

于是我自己写了一个Demo:

【爆款云服务器限时促销】
阿里云云服务器ECS实例2核2G,新人专享渠道特惠价只要82元!特惠热卖中。 点击立即购买

<!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,widthheight。难道问题出现在这三个样式上?我试着把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。

分享

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

LINK: https://www.qttc.net/227-ie-a-tag-include-img-tag-bug.html

NOTE: 原创内容,转载请注明出自琼台博客