所以我在页脚上方http://cure.org/上有一个简单的flickr图像Feed。 Feed包含在相对定位的div中,其中包含ul,而li包含<a>
和<img>
。 img绝对位于相对定位的li内部,而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;
}
答案 0 :(得分:0)
我怀疑是因为您要添加padding
来进行转变。我将其设置为position: relative
进行测试,然后悬停将其更改为top: -3px
,这似乎可以解决您的问题。