仅在IE7中,图像不能在锚点内单击

Question

Html结构

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

锚无法点击只在IE7中,我知道这个问题是因为hasLayout的,如果我们删除高度和跨度的宽度,它会正常工作.

但是我需要让它去除高度和宽度.

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

Answer 1

CSS Only解决方案

托马斯 - 我把你的小提琴改成了一个有效的例子.我更改了代码以span在a标记内部使用,因为在内div联元素(a标记)中具有标准块级元素(a )是无效的.给a标签布局(我用的inline-block),然后设置position:relative上span与z-index: -1推动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; }

line-height如果不想仅针对IE7,则添加更新的小提琴以制作"跨浏览器".我不停的width和height在span上面的html,只是因为原来的问题(双方gviswanathan和Tomas)要求它.如果span由于某种原因你不需要设置尺寸,但只是试图在图像上做双边框,那么下面评论中给出的thirtydot答案要简单得多.

Answer 2

使用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')