3

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 (height: 150px; and overflow: hidden;) 的属性，那么图像将是可点击的

问题

有没有办法解决这个问题？高度：150px；和溢出：隐藏；是必需的属性。

4

4 回答 4

3

这就是我解决这个问题的方法......而不是：

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

我这样做了：

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

像魅力一样工作。

于 2011-09-20T16:26:45.963 回答
3

可能是在 IE 中，您不能将内联元素包裹<a>在块级元素<div>或<h3>.

大多数浏览器会忽略它并按照您的预期行事，但 IE 对此事非常严格。

于 2011-03-04T13:14:49.580 回答
1 
if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
    $('.itemImg').click(function () {
        $(window.location).attr('href', $(this).parent('a').attr('href'));
    });
}
于 2012-05-22T15:43:21.460 回答
1

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

我认为 div 是问题的原因。

你可以取消 div 吗？

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

编辑 又去了：http: //jsfiddle.net/qjSpS/14/

不完全高兴，但它使所有元素都可以点击。

于 2011-03-04T13:30:22.583 回答