当前位置：首页 → 问答吧 → 链接中包含某些hasLayout元素导致的异常

链接中包含某些hasLayout元素导致的异常

时间：2010-09-01

来源：互联网

IE6、7下，a标签中如果包含某些元素（几乎所有人为产生的hasLayout元素），鼠标移到这些元素上时，链接会异常。
下面为演示，并附有说明，其中第四种情况直接导致链接失效。

<!doctype html> <title>链接中包含某些hasLayout元素导致无法点击</title> <base href="http://bbs.blueidea.com/images/default/" /> <style> li { margin: 10px 0 } a { background: #ddd } .hasLayout { zoom: 1 } .error { color: black; background: red } .normal { background: yellow } .inline-block { display: inline-block; display: inline } hr { height: 10px; color: blue } </style> <ol> <li> <a href="#">tag a<div class="">此div不拥有布局，链接正常，里面的img也正常<img src="logo.gif" /></div></a> </li> <li> <a href="#">tag a<div class="hasLayout error">此div拥有布局，链接异常（手形消失，实际可点）</div></a> </li> <li> <a href="#">tag a<span class="hasLayout error">此span拥有布局，链接异常（手形消失，实际可点）</span></a> </li> <li> <a href="#">tag a<span class="hasLayout error">此span拥有布局，链接异常（手形消失，实际可点）。里面的img既无手形提示，也不可点<img src="logo.gif" /></span></a> </li> <li> <a href="#">tag a<div class="inline-block normal">此div通过设置display:inline-block拥有布局后，再设置display:inline，链接正常（手性不消失，也可点）</div></a> </li> <li> <a href="#">tag a<div class="inline-block normal">此div通过设置display:inline-block拥有布局后，再设置display:inline，链接正常（手性不消失，也可点）。包含img也正常<img src="logo.gif" /></div></a> </li> <li> <a href="#">链接中的img标签，img标签默认拥有布局，链接正常<img src="logo.gif" /></a> </li> <li> <a href="#">链接中的hr标签（下面的蓝条），链接正常<hr /></a> </li> </ol>
提示：您可以先修改部分代码再运行

这是个人总结的几种情况，但不清楚为什么。求高人解释。

[ 本帖最后由 xthsky 于 2010-9-1 15:37 编辑 ]

作者: xthsky 发布时间: 2010-09-01

在IE6 IE7下行内标签如span 可通过触发haslayout 来模拟 display:inline-block效果
<a href="#">布局<span style="zoom:1;width:100px;border:1px solid red">链接</span></a>
<a href="#">布局<span style="display:inline-block;width:100px;border:1px solid red">链接</span></a>
以上两种效果是一样的。
http://www.cnblogs.com/radom/archive/2010/06/09/1755157.html
点倒是可以点吧！只是光标移上没显示手指标！呵呵！

[ 本帖最后由 radom 于 2010-9-1 14:34 编辑 ]

作者: radom 发布时间: 2010-09-01

我困惑的是，a链接里包含某些元素失效导致链接的原因。确实可点，感谢指正，我对原帖做了修改。第4种是链接失效的情况。

[ 本帖最后由 xthsky 于 2010-9-1 15:18 编辑 ]

作者: xthsky 发布时间: 2010-09-01

关注下

作者: furuier 发布时间: 2010-09-01