在Internet Explorer（IE）中悬停li背景的奇怪行为

因此，我在页眉上方的http://cure.org/上有一个简单的flickr图像供稿。 Feed中包含一个相对定位的div，里面有ul，里面包含<a>和<img>。 img绝对位于相对定位的li内部，并且li具有给出照片边界效果的背景。在Internet Explorer（IE）中悬停li背景的奇怪行为

我遇到的问题是有一个：悬停样式，以便当您将鼠标悬停在图像上时，它们会向上移动几个像素，而在webkit和firefox浏览器中，它们也旋转几度。 Chrome，Safari和Firefox都适用。但是在Internet Exploiter中，我得到了这个奇怪的协议，如果你将鼠标悬停在一张图像上，那么浮动图像中所有以前图像的背景也会向上移动，而不是后面的图像。这很奇怪，我不太明白为什么会发生，或者如何解决。

任何提示？您可以使用上面的链接查看实况页面，或者看到下面的代码摘录：

标记...

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

来源

2010-07-15 Joel Glovier

设计上的荣誉。 – Hristo 2010-07-15 13:33:35

同意Hristo，除了在Firefox中，页面底部的“反馈”与文本重叠:-) – ScottS 2010-07-15 13:45:57

谢谢。是的，重叠可能是由于屏幕宽度较小，尽管我认为我已经考虑到了这一点。无论如何。 PS - 如果你想给我看一个屏幕截图，我很乐意看到你的看法。 – 2010-07-15 13:53:10

我怀疑这是因为你正在添加padding来做这个转变。我通过将其设置为position: relative进行测试，然后将其悬停为top: -3px，它似乎解决了您的问题。

来源

2010-07-15 13:45:07 ScottS

这似乎工作 - 谢谢！ – 2010-07-15 13:57:39

在Internet Explorer（IE）中悬停li背景的奇怪行为

回答

相关问题