:hover 在 IE9 中无法正常工作答案

【问题标题】：:hover is not working properly in IE9:hover 在 IE9 中无法正常工作
【发布时间】：2011-09-30 22:35:03
【问题描述】：

我有一个简单的 CSS 下拉菜单，里面有一个 iframe。当我将鼠标悬停在下拉菜单上时，菜单会下拉。但是当我的鼠标悬停在菜单内的 iframe 时，菜单会返回。这是我的代码的简化版本：

<div id="comments">
  <a href="#" class="btn">View comments</a>
  <div id="comment-wrap">
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
  </div>
</div>

<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>

这适用于最新版本的 FF、Chrome 和 Opera。

附：当我的鼠标悬停在#comment-wrap 的内边距时，下拉菜单保持下拉状态。

【问题讨论】：

您使用哪种文档类型？

标签： css internet-explorer iframe hover

【解决方案1】：

不幸的是，这似乎是一个浏览器错误，可以追溯到许多 IE 版本。您可以使用 JS 解决方案作为 IE 的备份。我创建了一个 jsFiddle example，改编自 another solution 的代码来解决这个问题。

希望有帮助！

编辑：在 IE9 中的进一步测试表明，虽然 iframe 已显示，但将鼠标悬停在滚动条上会立即隐藏它。对此可能有更多涉及的 JS 修复，但您是否愿意实施它取决于您。

【讨论】：

【解决方案2】：

我在使用 :hover 伪类时遇到了类似的问题。当我将浏览器的文档模式更改为 IE 9 并且浏览器模式也设置为 IE9 时，它开始正常工作。 IE 9 的文档模式默认设置为 IE8。

此外，您可以在 head 标签中添加以下元信息：

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

希望这会有所帮助。

【讨论】：

嗨 Vilas，你能解释一下 /how/ 设置文档/浏览器模式吗？我假设文档模式是页面作者在标记中某处设置的设置，但浏览器模式是用户拥有的设置？
是的，我指的是浏览器模式，另外你可以在头部标签中添加以下元信息
哇，那个元标记是怎么工作的？它完全解决了我的问题！
手动更改浏览器查看页面的方式（专门针对您的浏览器）打开Developer Tools 按F12 并确保您的Browser Mode 和Document Mode 均已正确设置（Browser Mode 应该是你的 IE 版本，Document Mode 应该设置为 Standards）
@Johannes 我应该要求我的所有用户都这样做吗？ :P

【解决方案3】：

我最近在 IE10 中遇到了一个悬停问题（不确定较低版本），这让我抓狂。我的 css 悬停设置正确，它适用于包含 iframe 的 div。问题是，当您将鼠标悬停在 div 上时，它会显示 iframe，但是一旦您尝试将鼠标移入 iframe，它就会再次消失。我到处搜索，除了使用 javascript 或 jquery 之外，没有找到任何可以接受的答案。经过几天的尝试，我找到了一个非常简单的解决方案，对我有用。我只是从 div 中删除了 iframe 并使用了诸如

之类的对象

<div class='showme'>links<div style='float:left;' class='showme_1'>
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
    </object>
</div>

我希望这可以帮助人们节省大量研究时间。

【讨论】：

【解决方案4】：

我发现有同样的问题，我知道这已经是一篇旧帖子，但我觉得我必须发布我的解决方案。基本上IE不接受:hover以外的任何标签的:hover事件，指定href（不适用于早期的ie版本），除非你在顶部添加<!DOCTYPE HTML>。就是这样！问题解决了:)。

【讨论】：

只是喜欢我在没有任何解释的情况下投票否决：P。容易被否决，难以证明？这将帮助我和任何来到 SO 并搜索这个问题的答案的人，以了解为什么要投票（赞成或反对）。我分享了我的经验以提供帮助并添加不同的选项。我经常发现投票最多的答案不是对我有用的答案。不是个人问题，只是想具有建设性。