仅在IE7中才能在锚点内单击图像
Html结构
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>锚点不是只在IE7中可点击，我知道这个问题是因为hasLayout而发生的，如果我们去掉跨度的高度和宽度，它会工作得很好。
但我需要让它的工作与删除高度和宽度。
EDIT:你可以在这里修改一个例子：http://jsfiddle.net/rxcAb
回答 12
Stack Overflow用户
发布于 2012-04-02 09:21:20
仅CSS解决方案
Tomas-I modified your fiddle into a working example。我更改了代码，以便在a标记中使用span，因为在内联元素( a标记)中包含标准块级元素( div)是无效的。给定a标签布局(我使用的是inline-block)，然后在该span上设置一个带有z-index: -1的position:relative，这会将span推到a标签的“下方”，并使IE7再次将a标签识别为活动的。下面是我的小提琴中使用的修改后的代码。您可能想要设置一个比我的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; }如果不想只以IE7为目标，则添加了和line-height以使其成为“跨浏览器”。我将width和height保存在上面的span html中，只是因为原始问题( gviswanathan和Tomas)要求这样做。如果出于某种原因，您不需要在span上设置尺寸，而只是尝试在图像上设置双倍边框，那么thirtydot's answer given in the comment's below要简单得多。
Stack Overflow用户
发布于 2011-10-12 18:15:13
在jQuery中，下面的命令将强制所有链接工作，并使用“指针”光标：
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});我已经在兼容性视图模式下用IE8测试了这个模拟IE7，但不能保证它会单独用于IE7。
您可能希望更有选择性地应用这一点--我怀疑这可能会降低旧浏览器的性能--在这种情况下，将一个类(如<a href='myClass'>)应用于以这种方式断开的所有链接，并将$('a')更改为$('.myClass')
Stack Overflow用户
发布于 2012-04-02 16:00:10
您是否尝试过使用HTML5填充程序？它对解决由hasLayout引起的问题有很大帮助。
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->https://stackoverflow.com/questions/5735158
复制相似问题