IE BUG:内联的图片超链接失效

BUG描述下先:在标签<a>下加入<span>和<img>标签,并将<a>和<span>标签定义为display:block,设定大小,测试发现鼠标放在图片是不会显示手型,图片的链接也“失效”了(其实未失效,下面解释),点击没有任何效果,但点击<a>标签的空白位置,链接依然有效。

适用平台

IE6-8下出现,IE9未测试,Chrome正常。

BUG重现

下面是专门写的一个测试页面,有兴趣的可以测试下。

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE BUG:内联的图片超链接失效 - Design by jucelin.com</title>

<style>

.test-a{display:block; width:100px; height:100px; background:#eee;}

.test-a .test-img{display:block; width:50px; height:50px; background:yellow;}

.test-a .test-title{display:block;}

</style>

</head><body>

<div>

<a href="https://jucelin.com" target="_blank">

<span><img src="Images/form.png" border="0" /></span>

<span>jucelin.com</span>

</a>

</div>

<div>

<a href="https://jucelin.com" target="_blank" class="test-a">

<span class="test-img"><img src="Images/form.png" border="0" /></span>

</a>

</div>

</body></html>

下面是测试的截图(图片丢失):

图中的鼠标应该是正常的鼠标,单截图没办法截下鼠标的样式,就随便找了个样式演示下。

从测试可以看出来,图片的链接实际上仍然存在的,鼠标放上去之后在IE的状态栏中显示了链接的地址,但单击时,则链接无法相应。jucelin也解释不了这其中的原因,只能记下来自己以后注意下。

解决办法

BUG 就找个Hack的方法补补,将img所在的span添加position:relative; z-index:-1;样式,就是将span的层级放到a的下方,此时的要求是a不能有背景色,否则img就看不到了。另外使用JS也可以很好的解决。

相关文档

IE6,7中, 图片导致超链接失效的bug:http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/

本文固定链接: https://jucelin.com/ie-bug-no-links-for-img.html | Jucelin

该日志由 jucelin 于2012年01月13日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: IE BUG:内联的图片超链接失效 | Jucelin
关键字: , , , , , , ,

IE BUG:内联的图片超链接失效:沙发还在为你留着呢!!

发表评论

您必须 [ 登录 ] 才能发表留言!

更多