Unclickable image inside link in IE7
Having a problem with IE7, here is explanation.
HTML
<a class="item" href="http://google.com">
<div class="itemImg">
<img src="http://img开发者_JAVA技巧-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.
It may be that in IE you can not wrap an inline element <a>
around block level elements <div>
or <h3>
.
Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.
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.
Have you noticed that with the image the red border around the edge is clickable?
I think the div is the cause of the problem.
can you do away with the div?
I tweaked your example to show how it might work without the div: http://jsfiddle.net/qjSpS/10/
EDIT had another go: http://jsfiddle.net/qjSpS/14/
Not completely happy but it has made all the elements clickable.
if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
$('.itemImg').click(function () {
$(window.location).attr('href', $(this).parent('a').attr('href'));
});
}
精彩评论