当鼠标浏览IE中的Facebook登录按钮时,Bootstrap菜单下拉关闭

时间:2014-02-24 21:02:13

标签: css facebook twitter-bootstrap twitter-bootstrap-3

我第一次在网站上使用Bootstrap并遇到IE问题(在版本11中测试过)。

我在下拉菜单中有一个登录表单,在表格下面我有一个Facebook登录按钮。在FF& Chrome,但IE(像往常一样)表现得很奇怪。当鼠标移过Facebook登录按钮时,下拉菜单会突然关闭。

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

复制步骤:

  1. 转到IE中的网站
  2. 将鼠标悬停在登录以打开下拉列表
  3. 将鼠标移到Facebook登录按钮
  4. 对IE感到抱歉
  5. 可能导致问题的原因,以及如何解决?

2 个答案:

答案 0 :(得分:2)

我认为这可能是因为IE处理悬停在iframe上的方式。当您将鼠标悬停在Facebook“登录”iframe上时,IE认为您不再徘徊在下拉列表中。一种可能的解决方案是使用JQuery添加悬停状态:

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

如果你正在使用Modernizr,你可以将它包装在一个漂亮的if语句中,以便只为IE执行它。

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

答案 1 :(得分:2)

嗯,这是一个旧的“bug”,至少已经存在于IE 7中 问题是,当hovered元素中存在iframe时,IE会失去:悬停状态。

我设置了JSFiddle为我工作(使用IE 11测试并通过开发人员工具更改模式),但我不得不选择jQuery版本1.9.1,因为1.10.x不起作用!

说明:当li元素具有mouseenter事件(因此它被悬停)时,以及iframe被悬停时,会向{{1}添加一个额外的类名称}}。并且在li事件发生时将其删除。

Javascript代码不是那么“优雅”,而应该只展示所需的概念。 ; - )