Question

IE7有问题，这里有解释。

HTML

<a class="item" href="http://google.com">
   <div class="itemImg">
       <img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
   </div>
   <h3>Hello World</h3>
</a>

CSS

.item {
   color: #140804;
   cursor: pointer;
   padding: 17px;
   position: relative;
   text-align: center;
   text-decoration: none;
   width: 142px;
   display:block;}
.item * {
   cursor: pointer;}
.itemImg {
   background: none repeat scroll 0 0 red;
   height: 150px;
   line-height: 150px;
   margin-bottom: 10px;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;}
.itemImg img {
   vertical-align: middle;}

结果

http://jsfiddle.net/qjSpS/11/

问题

在IE7中，图像无法点击

我对问题的看法

似乎问题与.itemImg上的hasLayout属性设置有某种关系。如果我删除触发hasLayout的属性（高度：150px;以及溢出：隐藏;），那么图像将是可点击的

问题

有什么方法可以解决这个问题吗？身高：150px;溢出：隐藏;是必需的属性。

Answer 1

可能在IE中，您无法在块级元素<a>或<div>周围包装内联元素<h3>。

大多数浏览器都会忽略它，并按照您的预期行事，但IE在这个问题上非常严格。

Answer 2

这就是我如何解决这个问题......而不是：

<a><div><img></div></a>

我这样做了：

<a href=""><div><div style=background:url(img.jpg);width:10px;height:10px;></div></div></a>

像魅力一样工作。

Answer 3

您是否注意到图像边缘的红色边框是可点击的？

我认为div是导致问题的原因。

你可以取消div吗？

我调整了你的例子来展示它如何在没有div的情况下工作： http://jsfiddle.net/qjSpS/10/

修改又来了：http://jsfiddle.net/qjSpS/14/

并不完全开心，但它使所有元素都可以点击。

Answer 4

if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
    $('.itemImg').click(function () {
        $(window.location).attr('href', $(this).parent('a').attr('href'));
    });
}

IE7中链接内部的不可替换图像

4 个答案: