HTML结构
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Anchor 仅在 IE7 中不可点击，我知道问题是因为 hasLayout 而发生的，如果我们删除跨度的高度和宽度，它将正常工作。
但我需要在不移除高度和宽度的情况下使其工作。
编辑：你可以在这里摆弄一个例子：http://jsfiddle.net/rxcAb
【问题讨论】：
标签： html css internet-explorer-7 haslayout
托马斯-I modified your fiddle into a working example。我将您的代码更改为在a 标记内使用span，因为在内联元素（a 标记）中具有标准块级元素（div）是无效的。给出a 标签布局（我使用inline-block），然后在span 上设置position:relative 和z-index: -1 将span 推到a 标签的“下方”并让IE7 识别@ 987654342@ 再次标记为活动状态。下面是我的小提琴中使用的修改后的代码。你可能想设置一个比我的ie7AFix 更通用的类名（你可能还想只针对那些只需要它的 CSS 属性来定位 IE7）。我假设您正在通过图像改变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 会简单得多。
【讨论】：
line-height 问题并且已解决 like so。
使用 jQuery，以下将强制所有链接工作，并具有“指针”光标：
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});
我已经在兼容视图模式下测试了这个模拟 IE7 和 IE8，但不能保证它本身可以用于 IE7。
您可能希望更有选择性地应用它——我怀疑这可能会降低旧版浏览器的性能——在这种情况下，将一个类（如<a href='myClass'>）应用于所有以这种方式损坏的链接，只需将$('a') 更改为$('.myClass')
【讨论】：
您是否尝试过使用 HTML5 shim？它对hasLayout 引起的问题有很大帮助。
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
【讨论】：
只需从 IMG 中取出 SPAN。 IMG 元素可以像任何其他元素一样使用类来设置样式，因此您不需要在它周围设置跨度。
【讨论】：
为 a 元素赋予以下 CSS 规则：
{
display:block;
overflow:hidden;
}
【讨论】：
不可能在 IE7 中实现并且仍然保留跨度的宽度，如果您可以在 JS 小提琴中展示您想要实现的目标，也许我们可以提供帮助，找到解决方法，例如这只是一个猜测，将宽度放在anchor 上并带有一些填充将有助于创建一个完全可点击的区域，并且如果这就是您所追求的，仍然可以限制“标题”跨度..
示例解决方法不是修复
CSS：
a {
display: inline-block;
background: #ff0;
max-width: 50px;
padding: 10px;
text-align: center;
}
img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}
HTML：
<a href="#">
<img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
<span>Some text and even longer</span>
</a>
以上只是一个想法，如果不是你想要的，请提供样本jsfiddle.net
【讨论】：
可能是一个问题，因为您没有在 <a> TAG 中定义 href="#" 因此，请将 href="#" 放入您的 <a> TAG 中。像这样写：
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
【讨论】：
只需将锚标记包裹在 Div 或 Span 中。它在 IE7 中工作。
这种方式不对..？
【讨论】：
从您的帖子中，我认为您想要一个带有跨度信息文本的可点击图像！我希望这会对你有所帮助;)
http://jsfiddle.net/ajinkyax/v5KH5/3/
<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>
CSS：
.imgLink {display: block; width: 200px; text-align: center;}
【讨论】：
查看 fiddle 的代码和演示
小提琴：http://jsfiddle.net/rxcAb/29/
演示：http://jsfiddle.net/rxcAb/29/embedded/result/
在 IE7、IE8、FF、Chrome、Safari 中完美运行。
代码没有变化：见下文
<a href=http://www.google.com/>
<div class="gal_image" 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;">
</div>
</a>
【讨论】：
一个简单的方法是：
<p>
<span><img></span>
<span> Some text <span>
<a></a>
<p>
p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
【讨论】：
如果你有类似的东西：
<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>
只需像这样向锚添加样式属性：
<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">
这将使 div 和其中的所有内容在 IE7+ 和 firefox & chrome 中都可以点击。
【讨论】：