整理:在 IE6 和IE7 中a标签中的内联元素触发IE 的 haslayout属性后,链接无效的BUG
by karry
at 2010-11-26 10:14:22
original http://item.feedsky.com/~feedsky/PlayGoogleKarry/~8010025/463440062/5589304/1/item.html
昨天在工作中遇到一个诡异的现象,老版本IE( IE6 和IE7) 导航栏a标签无法正常使用,但onclick事件能正常执行。
经反复测试发现:
a标签内嵌套一层或多层内联元素(如span label em 等), 最终的内联元素包含一个img元素, 这时, 如果触发了a元素和img元素之间的任何一个元素的hasLayout, 那么超链接将失效.
<a href=”http://playgoogle.com”>
<span><img src=”test.jpg” alt=”test” title=”test” /></span>
</a>
span {
display: inline-block;
}
有三种解决办法:
- 不要在a标签内嵌套任何内联元素,使用其他方式实现。
- 不要触发内联元素的haslayout属性。
- 对img 设置相对定位,并把z-index设置为负值。
注:内联元素触发haslayout 的条件: