IE7 中链接内的图像无法点击

发布于 2024-10-20 07:34:29 字数 1193 浏览 2 评论 0原文

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 中图像不可点击

我对问题的看法

看来问题与 hasLayout 属性设置有关.itemImg。如果我删除触发 hasLayout 的属性（高度：150px；和溢出：隐藏；），则图像将可点击

问题

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

原文

Having a problem with IE7, here is explanation.

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;}

Result

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

Problem

In IE7 image is unclickable

My thoughts on problem

It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable

Question

Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第七度阳光i 2024-10-27 07:34:29

在 IE 中，您可能无法将内联元素包裹在块级元素

或

周围>。

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

回复收藏 0 原文

彼岸花似海 2024-10-27 07:34:29

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

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

我这样做了：

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

工作得像个魅力。

THis is how i solved this problem..instead of:

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

i did this:

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

worked like a charm.

回复收藏 0 原文

陌伤ぢ 2024-10-27 07:34:29

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

我认为 div 是问题的原因。

你能去掉 div 吗？

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

编辑
还有一次： http://jsfiddle.net/qjSpS/14/

不完全高兴，但它已经使所有元素均可点击。

回复收藏 0 原文

煮酒 2024-10-27 07:34:29

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

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

回复收藏 0 原文

~没有更多了~