Comportement étrange des arrière-plans li sur hover dans Internet Explorer (IE)

Question

J'ai donc un simple flux d'image flickr sur http://cure.org/ juste au-dessus du pied de page. L'alimentation est contenue dans un div relativement positionné, avec un ul à l'intérieur, et li qui contiennent les <a> et <img> à l'intérieur. L'img est absolument positionné à l'intérieur du li relativement positionné, et le li a un fond pour donner un effet de bordure photo. Le problème que j'ai est qu'il y a un style: hover de sorte que lorsque vous passez la souris sur les images, ils déplacent quelques pixels, et dans les navigateurs webkit et firefox ils tournent également de quelques degrés. Tout va bien dans Chrome, Safari et Firefox. Mais dans Internet Exploiter, j'ai cette étrange affaire où si vous survolez une image, les arrière-plans de toutes les images précédentes du flotteur se déplacent également, mais pas ceux d'après. C'est vraiment étrange, et je ne peux pas vraiment voir pourquoi cela se passe, ou comment résoudre.

Des conseils? Vous pouvez utiliser le lien ci-dessus pour afficher la page en direct, ou voir des extraits du code ci-dessous:

le balisage ...

<div id="mediaFeedImgs"> 

<ul> 

    <li class="mediaImg"> 
     <a href="#" title="Makau Nzisa"><img src="http://farm5.static.flickr.com/4060/4385817766_d0e0f076a6_s.jpg" alt="Makau Nzisa" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="passion2010IMG_2456"><img src="http://farm5.static.flickr.com/4011/4266257860_909860cab5_s.jpg" alt="passion2010IMG_2456" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="IMG_1616"><img src="http://farm3.static.flickr.com/2636/4113313926_0f11062dd5_s.jpg" alt="IMG_1616" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="Mbinya Nzive"><img src="http://farm5.static.flickr.com/4013/4387741405_ce7889e71b_s.jpg" alt="Mbinya Nzive" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="James Kariuki"><img src="http://farm5.static.flickr.com/4036/4385054803_cee8954f02_s.jpg" alt="James Kariuki" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="phpValev8"><img src="http://farm5.static.flickr.com/4004/4648263242_f664121517_s.jpg" alt="phpValev8" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="Zenebu_0015"><img src="http://farm5.static.flickr.com/4021/4440138241_b81e7bc517_s.jpg" alt="Zenebu_0015" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="Oslin_8589"><img src="http://farm5.static.flickr.com/4058/4425042835_42945a39fa_s.jpg" alt="Oslin_8589" width="75" height="75" /></a> 
    </li> 

    <li class="mediaImg"> 
     <a href="#" title="Jose_7722"><img src="http://farm3.static.flickr.com/2693/4422684429_d497172e91_s.jpg" alt="Jose_7722" width="75" height="75" /></a> 
    </li> 

</ul> 

CSS ...

#mediaFeedImgs { 
    position:absolute; 
    top:60px; 
    left:10px; 
} 

#mediaFeedImgs li { 
    float:left; 
    margin-right:16px; 
} 

.mediaImg { 
    display:block; 
    width:89px; 
    height:90px; 
    background:url(/img/media/photo-bg-75px.png) no-repeat left top; 
    position:relative; 
    z-index:1; 
} 

.mediaImg:hover { 
    margin-top:-3px; 
    padding-bottom:3px; 
    height: 87px; 
    -webkit-transform: rotate(-5deg); 
    -moz-transform: rotate(-5deg); 
} 

.mediaImg img { 
    position:absolute; 
    top:5px; 
    left:7px; 
} 

Answer 1

Je suppose que c'est parce que vous ajoutez padding pour faire le changement. J'ai testé en l'ayant réglé à position: relative et puis en vol stationnaire le changer en top: -3px et il a semblé résoudre votre problème.