哈哈小老虎's Blog

一. bug症状

点击包含图片的超链接, 页面并不跳转, 若图片与超链接之间存在空白, 点击空白处, 页面会跳转; 但却会响应鼠标事件.

二. bug出现的场景

a元素内嵌套一层或多层内联元素, 最终的内联元素包含一个img元素, 这时, 如果触发了a元素以内的, img元素的任何一个父元素的hasLayout, 那么超链接将失效.

三. 例子

<a href="url"><span><img src="pic url" alt="msg" /></span></a>
/* 假设图片的尺寸为100 × 100, a 的样式可以忽略 */
a {
   display: block;
   width: 100px;
   height: 100px;
   /* 这句需要加上, 当bug出现时, 超链接默认的手形图标会消失 */
   cursor: pointer;
}
a span {
   /* 只要触发hasLayout, 就可以看到这个bug, 如: float, zoom, position等 */
   display: block;
   width: 100%;
   height: 100%;
}
a span img {
   vertical-align: middle;
}

四. 解决办法

1. 不触发span元素的hasLayout;

2. 将img元素进行定位(不设置位置属性), 并将其z-index设置为负数(这个解决方法是基于这样一种判断: 点击图片区域时, 链接无效, 若图片与链接之间存在空白, 点击空白区则是有效的, 所以, 可以认为是图片挡在a元素上面, 我们在点击时, 实际上点的是图片, 我们只要让a元素显示在最上面就可以了).

五. 我的其他尝试

1. 触发img元素的hasLayout; (依然无效) .