IE8中Bootstrap下拉菜单无法正常工作

Question

我正在使用Bootstrap框架设计我的网站。我的导航栏中下拉菜单可以正常工作，但是在IE8中出现了一些未知的问题，当您点击“关于我们”链接时，下拉菜单无法完全显示。这只会在IE8中发生。

其他浏览器都可以正常工作。

您可以在此处查看它： https://dl.dropboxusercontent.com/u/52725754/fightback-responsive/index.html 有人能帮忙解决这个问题吗？

- legacyterror

---

在Chrome中无法工作。 - suresh gopal

在我的Chrome浏览器中它运行良好，但在IE8浏览器中无法正常工作。 - legacyterror

我非常确定你不需要通过JS进行初始化 - 此插件的数据API会自动处理。IE8对我来说也很奇怪，但实际上似乎是渲染问题。也许是页面上其他CSS的问题。@suresh.g，您可能忽略了页面通过HTTPS提供服务，而加载的资源是HTTP。默认情况下，Chrome将阻止脚本加载。 - merv

Answer 1

这个问题的解决方案在Bootstrap的GitHub论坛上：https://github.com/twitter/bootstrap/issues/6548。似乎原生的IE8有时会因为filter:参数而出现故障，该参数在Bootstrap的css中用于渐变等。解决方案是将filter:none!important添加到类似于.navbar或.navbar-inner这样的元素中，前者对我起作用了。

- mikegertrudes

Answer 2

我在使用Bootstrap 3.3.4时，在IE8上遇到了下拉菜单问题。我通过使用jQuery版本1.11.2而非2+来解决了这个问题。

- Jeff Collins

Answer 3

IE8 fix for twitter bootstrap responsive menu:

For me the **menu-toggle** button appeared in IE8 so to make it appear as normal menu I used

<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

And a seprate CSS for IE8 containing the below classes 
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" />
  <![endif]-->

Include the below classes inside the ie8.css file

.navbar-header, .navbar-collapse, .collapse{display:none;}
.collapseie8 ul li{ float:left; }
.navbar-nav, .collapse{ display:block; }
    .navbar-inverse.nav li.dropdown.open > .dropdown-toggle,
    .navbar-inverse.nav li.dropdown.active > .dropdown-toggle,
    .navbar-inverse.nav li.dropdown.open.active > .dropdown-toggle, .nav, .navbar, .navbar-inverse.navbar-inner { 

        filter: none!important;
        background-image: none;
    }

 <div id="defaultmenu" class="navbar-collapse collapse collapseie8">
                <ul class="nav navbar-nav ">

- Allan

Answer 4

我在使用Bootstrap 2.3.2版本时遇到了下拉菜单在IE8中无法显示的问题。

经过阅读一些帖子后，我找到了解决方法，并将其添加到我的IE8和7的条件样式表中。

/** 修复IE8兼容模式下下拉菜单的问题 **/

.navbar-inner{filter:none;}

希望这能有所帮助 :)

- Getsomepeaches

Answer 5

在 bootstrap-theme 中有一个问题（在 IE8 和 IE9 中），请参见this thread。

要确认这是您的问题，

• 请检查下拉菜单是否在Bootstrap 的导航栏示例中正常工作
• 注释掉bootstrap-theme.min.css的引用。然后下拉菜单应该会出现。

我使用了以下解决方法（在第一个链接中建议）：

• 使用bootstrap-theme.css而不是 .min 版本
• 注释掉filter: progid:DXImageTransform.Microsoft.gradient(...)这一行。

Mark Otto 还建议将导航栏的内容包装在另一个 div 中，并在那里添加样式调整。

希望这可以帮到您。

- Labarbiche