html – 图像不能在IE7内部锚点

Html结构

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

锚点不能在IE7中单击，我知道由于hasLayout发生的问题，如果我们删除高度&宽度的跨度，它会工作正常。

但是，我需要使用它去除高度&宽度。

编辑：你可以在这里提到一个例子：http://jsfiddle.net/rxcAb

解决方法

仅CSS解决方案

托马斯-I modified your fiddle into a working example。我改变了你的代码，使用一个标签内的跨度，因为在一个内联元素(一个标签)中有一个标准块级元素(一个div)无效。给出一个标签布局(我使用内联块)，然后设置一个位置：相对于该范围的z-index：-1将跨越“tag”放在一个标签上，并使IE7再次识别标记为活动。以下是我的小提琴中使用的修改代码。您可能需要设置一个比我的ie7AFix更通用的类名(您可能也只想将IE7仅针对那些仅需要的CSS属性)。我假设你是通过图像来改变宽度和高度，因此你为什么把它们作为内联样式。

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; }

如果不想仅针对IE7，则添加行高的Updated Fiddle使“跨浏览器”。我把宽度和高度保留在上面的span html中，只是因为原来的问题(由gviswanathan和Tomas都要求)。如果由于某种原因您不需要在跨度上设置尺寸，但只是尝试在图像上进行双边界，则thirtydot’s answer given in the comment’s below将会更简单。