Question

<div>
<ul class="ulCont">
<li><a href="#nogo">Sky</a></li>
<li><a href="#nogo">Sea</a></li>
</ul>
<img class="thinker01" src="images/thinker01.png"/>
<div class="clearBoth"></div>
</div>

CSS

.ulCont{float:left;}
.thinker01{float:right;}
.thinker01:hover{margin-top:-5px;}
.clearBoth{clear:both;}

Firefox和Chrome - 运行良好，即鼠标悬停时移动img，ul保持不变。
IE8 - 当鼠标悬停img时 - 它也会将ul移动到-5px的上边距那么，有人会对IE制作实施禁运吗？

Answer 1

我刚刚给了你jsfiddle你给我的东西。我已经尝试了你在所有三种浏览器中谈论的内容。它们都像你告诉它一样在悬停时向上移动-5px。

Answer 2

我没有在IE8中为悬停获得任何动作。这是因为悬停在IE中仅适用于带有href的“a”标签。

W3Schools说你可以用适当的DOCTYPE工作，但我不确定是哪一个。 http://www.w3schools.com/cssref/sel_hover.asp

您可以在图片周围添加标签。

<a href="#nogo" class="thinker01"><img src="images/thinker01png_round_coaster.jpg"/></a>

并使用

删除边框

.thinker01 img {border: none;}

我意识到这个额外的“a”可能会导致其他问题，但它可能是您解决方案的开始。

Answer 3

我发现这适用于所有浏览器。请检查

<div>
<ul class="ulCont">
<li><a href="#nogo">Sky</a></li>
<li><a href="#nogo">Sea</a></li>
</ul>
<div style="clear:right;"></div> // this line is added
<img class="thinker01" src="images/thinker01.png"/>
<div class="clearBoth"></div>
</div>

IE 8 - 鼠标悬停在img上会影响ul

3 个答案: