html - 仅在 IE7 中无法在 anchor 内单击图像

Question

HTML 结构

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

anchor 仅在 IE7 中不可点击，我知道问题的发生是因为 hasLayout，如果我们删除 span 的高度和宽度，它将正常工作。

但我需要在不移除高度和宽度的情况下让它工作。

编辑:您可以在这里摆弄一个例子:http://jsfiddle.net/rxcAb

Answer 1

仅 CSS 解决方案

托马斯- I modified your fiddle into a working example .我更改了您的代码以在 a 标记内使用 span，因为在内联元素(a 标签)。给 a 标签布局(我使用 inline-block)，然后在 span 上设置 position:relative使用 z-index: -1 将 span 推到 a 标签“下方”，并使 IE7 识别 a 再次标记为事件。下面是我的 fiddle 中使用的修改后的代码。您可能希望设置一个比我的 ie7AFix 更通用的类名(您可能还希望针对 IE7 只针对它所必需的那些 CSS 属性)。我假设您正在根据图像改变 width 和 height，因此您将它们作为内联样式。

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Updated Fiddle 添加了 line-height 以实现“跨浏览器”(如果不想仅针对 IE7)。我在上面的 span html 中保留了 width 和 height ，只是因为原始问题(由 gviswanathan 和 Tomas 提出)要求它。如果出于某种原因不需要在 span 上设置尺寸，而只是想在图像上设置双边框，那么 thirtydot's answer given in the comment's below就简单多了。