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

【问题标题】：IE 8 - mouse over an img affects ulIE 8 - 鼠标悬停在 img 上会影响 ul
【发布时间】：2012-12-13 19:50:23
【问题描述】：

<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 生产吗？

【问题讨论】：

标签： css internet-explorer mouseover

【解决方案1】：

我刚刚为你给我的东西做了一个jsfiddle。我已经在所有三种浏览器中尝试了您所说的内容。就像你告诉它的那样，它们都会在悬停时向上移动-5px。

【讨论】：

MiniRagnarok，我使用所有三个浏览器访问了您的 jsfiddle，发现与之前完全相同的结果：在 FF 和 Chrome 中，列表没有移动，而在 IE8 中，它向上移动。请问其他人可以检查一下吗？

【解决方案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>

并删除边框

.thinker01 img {border: none;}

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

【讨论】：

@Issa 我用你的解决方案更新了jsfiddle，它仍然在 IE8 中向上移动。
我没有使用 jsfiddle。刚刚在我的硬盘上测试了html。我想这就是它不动的原因。无论如何看起来问题已经解决了。

【解决方案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>

【讨论】：

感谢迷你诸神黄昏。伊萨呢？