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

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 标签。

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

and remove the border with

.thinker01 img {border: none;}

I realize this extra "a" may cause other problems but it might be a start to your solution.

Answer 3

I found this works in all browsers for me. Please, check

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