twitter-bootstrap Bootstrap 下拉菜单在 IE8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15987426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown not working in IE8
提问by legacyterror
I am using the Bootstrap framework to design my site. I have the drop down working in the navigation, but from some unknown reason in IE8 the dropdown does not work. When you click on the About Us link, the drop down does not fully appear. This only happens in IE8.
我正在使用 Bootstrap 框架来设计我的网站。我在导航中有下拉菜单，但由于 IE8 中的某些未知原因，下拉菜单不起作用。当您单击“关于我们”链接时，下拉菜单并未完全显示。这只发生在 IE8 中。
It works fine in other browsers.
它在其他浏览器中运行良好。
You can view it here:
你可以在这里查看：
https://dl.dropboxusercontent.com/u/52725754/fightback-responsive/index.html
https://dl.dropboxusercontent.com/u/52725754/fightback-responsive/index.html
Can anyone help with this problem?
任何人都可以帮助解决这个问题吗？
回答by mikegertrudes
Here is the solution to this issue on the Bootstrap GitHub forums: https://github.com/twitter/bootstrap/issues/6548. It seems as though native IE8 will sometimes break due to the filter: parameter which is used throughout Bootstrap css for gradients etc. The solution is to add filter:none!important; to an element like .navbar or .navbar-inner. The former worked out for me.
以下是 Bootstrap GitHub 论坛上此问题的解决方案：https: //github.com/twitter/bootstrap/issues/6548。似乎原生 IE8 有时会由于 filter: 参数而中断，该参数在整个 Bootstrap css 中用于渐变等。解决方案是添加 filter:none!important; 到像 .navbar 或 .navbar-inner 这样的元素。前者对我有用。
回答by Jeff Collins
I had a problem with drop down menus on IE8 using bootstrap 3.3.4. I managed to resolve the problem by using jquery version 1.11.2 instead of jquery version 2+.
我在使用引导程序 3.3.4 的 IE8 上的下拉菜单有问题。我设法通过使用 jquery 版本 1.11.2 而不是 jquery 版本 2+ 来解决这个问题。
回答by Labarbiche
There is an issue in with bootstrap-theme (in IE8 and IE9), see this thread.
bootstrap-theme（在 IE8 和 IE9 中）存在问题，请参阅此线程。
To confirm this is your issue,
要确认这是您的问题，
- check that dropdowns work on Bootstrap's navbar example
- comment out the inclusion of
bootstrap-theme.min.css. Dropdowns should then appear.
- 检查下拉菜单是否适用于Bootstrap 的导航栏示例
- 注释掉包含
bootstrap-theme.min.css. 然后应该出现下拉菜单。
I used the following workaround (suggested in the first link):
我使用了以下解决方法（在第一个链接中建议）：
- use
bootstrap-theme.cssrather than the .min version - comment out the lines
filter: progid:DXImageTransform.Microsoft.gradient(...)
- 使用
bootstrap-theme.css而不是 .min 版本 - 注释掉这些行
filter: progid:DXImageTransform.Microsoft.gradient(...)
Mark Otto also suggested to wrap the contents of the navbar in another div, and add there the style tweaks.
Mark Otto 还建议将导航栏的内容包装在另一个 div 中，并在那里添加样式调整。
Hope this helps
希望这可以帮助
回答by Getsomepeaches
I had the issue with the dropdown not showing in IE8 using bootstrap version 2.3.2.
我遇到了使用引导程序版本 2.3.2 在 IE8 中未显示下拉列表的问题。
Having read a few feeds I came to this answer adding it to my conditional styles sheet for IE8 & 7.
阅读了一些提要后，我找到了这个答案，将其添加到我的 IE8 和 7 条件样式表中。
/** Fixes the problem for dropdowns in IE8 compatibility mode **/
/** 修复 IE8 兼容模式下下拉列表的问题 **/
.navbar-inner{filter:none;}
Hope this helps :)
希望这可以帮助 ：）
回答by Allan
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 ">
