Image non cliquable à l'intérieur d'un lien dans IE7

Question

J'ai un problème avec IE7, voici l'explication.

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

Résultat

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

Problème

Dans IE7, l'image n'est pas cliquable

Mes réflexions sur le problème

Il semble que le problème soit lié d'une manière ou d'une autre à la définition de la propriété hasLayout sur .itemImg. Si je supprime les propriétés qui déclenchent hasLayout (height : 150px ; et overflow : hidden ;), l'image sera cliquable.

Question

Existe-t-il un moyen de résoudre ce problème ? height : 150px ; and overflow : hidden ; are required properties.

Answer 1

Il se peut que dans IE, il ne soit pas possible d'envelopper un élément en ligne. <a> autour d'éléments au niveau du bloc <div> o <h3> .

La plupart des navigateurs l'ignorent et agissent comme vous vous y attendez, mais IE est assez strict en la matière.

Answer 2

Voici comment j'ai résolu ce problème au lieu de.. :

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

Je l'ai fait :

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

a fonctionné comme un charme.

Answer 3

Avez-vous remarqué qu'avec l'image, la bordure rouge autour du bord est cliquable ?

Je pense que le div est la cause du problème.

pouvez-vous supprimer le div ?

J'ai modifié votre exemple pour montrer comment cela pourrait fonctionner sans la div : http://jsfiddle.net/qjSpS/10/

EDITAR a fait un autre essai : http://jsfiddle.net/qjSpS/14/

Je ne suis pas totalement satisfait, mais tous les éléments sont désormais cliquables.

Answer 4

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