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

概述Html结构 <a> <span> <!-- Span has width & height --> <img> </span> <span> Some text <span></a> 锚点不能在IE7中单击，我知道由于hasLayout发生的问题，如果我们删除高度&宽度的跨度，它会工作正常。 但是，我需要使用它去除高度&宽度。 编辑：你可以在这里提到一个例子：htt 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/" >  <span >    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" >  </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将会更简单。

总结

以上是内存溢出为你收集整理的html – 图像不能在IE7内部锚点全部内容，希望文章能够帮你解决html – 图像不能在IE7内部锚点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。