当鼠标悬停在IE中的Facebook登录按钮上时，引导菜单下拉菜单将关闭

Question

我第一次在网站上使用Bootstrap，遇到了IE问题（在版本11中测试）。

我在下拉菜单中有一个登录表单，在表单下方我有一个 Facebook 登录按钮。FF和Chrome没有问题，但IE（像往常一样）表现得很奇怪。当鼠标悬停在Facebook登录按钮上时，下拉菜单突然关闭。

这是网站： http://www.pricewombat.com/

复制步骤：

1. 转到 IE 中的网站
2. 将鼠标悬停在"登录"上以打开下拉列表
3. 将鼠标移到脸书登录按钮上
4. 为IE感到难过

可能导致问题的原因是什么，如何解决？

Answer 1

嗯，这是一个旧的"错误"，至少从IE 7开始就已经存在了。
问题是，当悬停元素内有一个 iframe 时，IE 会丢失 ：hover 状态。

我

设置了一个对我有用的JSFiddle（使用IE 11进行测试并通过开发人员工具更改了模式），但是我不得不选择jQuery版本1.9.1，因为1.10.x不起作用！

说明：当 li 元素具有mouseenter事件（因此悬停）以及悬停iframe时，会将额外的类名添加到li 中。当mouseleave事件发生时，它会被删除。

Javascript代码不是那么"优雅"，而应该只展示所需的概念。

Answer 2

我相信

这可能是因为IE处理悬停在iframe上的方式。 当您将鼠标悬停在Facebook"登录"iframe上时，IE认为您不再将鼠标悬停在下拉菜单上。 一种可能的解决方案是使用 JQuery 添加悬停状态：

$('.fb-login-button').hover(function(){
      $('.dropdown').mouseover();
});

如果您使用的是 Modernizr，则可以将其包装在一个漂亮的 if 语句中，以便仅针对 IE 执行。

不幸的是，我现在无法访问IE，所以我无法对此进行测试，但这是我最好的猜测。 如果这有帮助，请告诉我！