twitter-bootstrap Bootstrap 导航栏在 IE9 上为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18792147/
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 navbar empty on IE9
提问by Rodolphe Beck
I tried to use the bootstrap template to generate a navbar on my aspnet mvc application.
我尝试使用引导程序模板在我的 aspnet mvc 应用程序上生成导航栏。
Everything works fine on Firefox and Chrome, but on IE my menu is transparent :
在 Firefox 和 Chrome 上一切正常，但在 IE 上我的菜单是透明的：
I checked, I have the <!DOCTYPE html>at the begining of my layout.
I also tried <meta http-equiv="X-UA-Compatible" content="IE=edge">
我检查了一下，我<!DOCTYPE html>在布局的开头有 。我也试过<meta http-equiv="X-UA-Compatible" content="IE=edge">
I tried to play with the F12 menu and compatibility mode, without success.
我试过用F12菜单和兼容模式玩，没有成功。
Any other clue ?
还有什么线索吗？
Thanks
谢谢
Edit: here is the generated code :
编辑：这是生成的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test • Home</title>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="bootstrap-theme.css" rel="stylesheet"/>
<link href="toastr.css" rel="stylesheet"/>
<script src="jquery-2.0.3.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<script src="angular.js"></script>
<script src="angular-resource.js"></script>
<script src="bootstrap.js"></script>
<script src="toastr.js"></script>
<!--[if lt IE 9]> HTML5Shiv
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body style="padding: 40px;">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="/">Test</a>
<li><a href="/">Home</a></li>
<li class="nav-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Page1/">Page1</a></li>
<li><a href="/Page2/">Page2</a></li>
<li><a href="/Page3/">Page3</a></li>
<li><a href="/Page4/">Page4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
回答by Ahmedul Haque Abid
I also had the similar problem in IE9 as I started to work on a new project. Looking through the browser support section in http://getbootstrap.com, you need to add respond.js in the IE code block and also need to make sure it works from IE 9 and older browsers.
当我开始从事一个新项目时，我在 IE9 中也遇到了类似的问题。查看http://getbootstrap.com 中的浏览器支持部分，您需要在 IE 代码块中添加 response.js，并且还需要确保它可以在 IE 9 和更旧的浏览器中运行。
So the [if IE] block should look something like this.
所以 [if IE] 块应该看起来像这样。
<!--[if lte IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
<![endif]-->
Notice the "lte" in the [if IE] block, which means IE <= 9, whereas "lt" meant IE < 9.
注意 [if IE] 块中的“lte”，表示 IE <= 9，而“lt”表示 IE < 9。
Hope this helps.
希望这可以帮助。
Update:I found an alternative solution to you problem. The bootstrap-theme.css used filter property on navbar which seems to making issues on IE9 and IE8. So you can just disable them by commenting them out. Then the dropdown menu will show up.
更新：我找到了您问题的替代解决方案。bootstrap-theme.css 在导航栏上使用了过滤器属性，这似乎在 IE9 和 IE8 上产生了问题。所以你可以通过注释掉它们来禁用它们。然后会出现下拉菜单。
Look for 'filter' in .navbar & .navbar-inverse and disable them. This will ofcourse turn off gradients for IE9 and older.
在 .navbar 和 .navbar-inverse 中查找“过滤器”并禁用它们。这当然会关闭 IE9 及更早版本的渐变。
回答by Rodolphe Beck
Ok it is not related to Jquery Version, but to a bug in IE and bootstrap.theme.css.
好吧，它与 Jquery 版本无关，而是与 IE 和 bootstrap.theme.css 中的错误有关。
After comparing our two pages, I realized that you did not include that CSS, I narrowed my search and stumbled upon this issue : https://github.com/twbs/bootstrap/issues/10257
比较我们的两个页面后，我意识到你没有包含那个 CSS，我缩小了搜索范围并偶然发现了这个问题：https: //github.com/twbs/bootstrap/issues/10257
I commented the filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); into navbar class, now it works !
我评论了过滤器： progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); 进入导航栏类，现在可以使用了！
Thanks for your help !
谢谢你的帮助 ！
