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将会更简单。