:hover 在 IE9 中无法正常工作
Posted
技术标签:
【中文标题】:hover 在 IE9 中无法正常工作【英文标题】：:hover is not working properly in 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-wrapdisplay:none;z-index:5;position:absolute;padding:10px;background-color:#fff;
#comments:hover #comment-wrapdisplay:block;
</style>
这适用于最新版本的 FF、Chrome 和 Opera。
附：当我的鼠标悬停在#comment-wrap 的内边距时，下拉菜单保持下拉状态。
【问题讨论】：
您使用哪种文档类型？ 【参考方案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 并搜索这个问题的答案的人，以了解为什么要投票（赞成或反对）。我分享了我的经验以提供帮助并添加不同的选项。我经常发现投票最多的答案不是对我有用的答案。不是个人问题，只是想具有建设性。以上是关于:hover 在 IE9 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章