twitter-bootstrap Twitter bootstrap 3 RC2 - IE8 中的导航不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18286892/
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
Twitter bootstrap 3 RC2 - Navigation in IE8 not working
提问by Vivendi
I'm using Twitter Bootstrap 3 RC2 to create a navbar at the top of my page which works fine except in IE8.
我正在使用 Twitter Bootstrap 3 RC2 在我的页面顶部创建一个导航栏，除 IE8 外，该导航栏工作正常。
In IE8 is acts like as if the browser was made small, so that the menu collapses for mobile view. But this is not the case.
在 IE8 中就像浏览器变小一样，以便移动视图折叠菜单。但这种情况并非如此。
Now i know that TB3 is still a work in progress. But i'd like to know if anyone have a solution for this here.
现在我知道 TB3 仍在开发中。但我想知道是否有人在这里有解决方案。
If you want to check my problem with IE8, then look here:
如果您想检查我的 IE8 问题，请看这里：
http://jsfiddle.net/DnwJN/embedded/result/
http://jsfiddle.net/DnwJN/embedded/result/
(you need the direct link, because the JSFiddle it self doesn't work with IE8)
（您需要直接链接，因为它本身的 JSFiddle 不适用于 IE8）
And here is the JSFiddle:
这是 JSFiddle：
You'll see that the navbar works fine in every other browser. Even IE9. But not IE8. And TB3 does support IE8. They only dropped support for IE7 and below.
您会看到导航栏在所有其他浏览器中都可以正常工作。甚至IE9。但不是 IE8。TB3 确实支持 IE8。他们只放弃了对 IE7 及更低版本的支持。
Anyone have a solution for this problem?
任何人都有这个问题的解决方案？
The code from the fiddle
来自小提琴的代码
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
采纳答案by Goran Juri?
Hope this helps...
希望这可以帮助...
From http://getbootstrap.com/getting-started/:
从http://getbootstrap.com/getting-started/：
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
回答by Ronner
Also, take note of the fact that you have to include this code:
另外，请注意您必须包含以下代码：
<!--[if lt IE 9]>
<script src="${rc.getContextPath()}/js/vendor/html5shiv.js"></script>
<script src="${rc.getContextPath()}/js/vendor/respond.min.js"></script>
<![endif]-->
AFTERall the css has been included for it to work properly.
在包含所有 css之后，它才能正常工作。
回答by xeo
after adding the html5shim i was still having issues with the dropdown in ie8.
found this article https://github.com/twbs/bootstrap/issues/6548which explains that filters are getting in the way. bootstrap has a default filter on the navbar so you must clear that. here's what worked for me.
添加 html5shim 后，我仍然遇到 ie8 中的下拉列表问题。
找到这篇文章https://github.com/twbs/bootstrap/issues/6548，它解释了过滤器正在阻碍。bootstrap 在导航栏上有一个默认过滤器，所以你必须清除它。这对我有用。
.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,
.navbar, .navbar-inverse .navbar-inner {
background-color: #15317E;
border-color: #252525;
filter:none;
background-image: none;
}
回答by Artvader
Vanilla Bootstrap 3 uses jQuery 2 by default. So in order to get it working in IE8, you have to change jQuery version to less than jQuery 2.
Vanilla Bootstrap 3 默认使用 jQuery 2。所以为了让它在 IE8 中工作，你必须将 jQuery 版本更改为小于 jQuery 2。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Include these two scripts:
包括这两个脚本：
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
Most importantly, use a web server to view your site (with http:// or https:// protocol, as file:// protocol would break respond.js' execution).
最重要的是，使用 Web 服务器来查看您的站点（使用 http:// 或 https:// 协议，因为 file:// 协议会破坏 response.js 的执行）。
回答by mascot6699
Try adding
尝试添加
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
to your code and check or use modernizer.js or normalizer.js. Also check http://getbootstrap.com/getting-started/#browserswhere it says to include respond.js to enable media query support.
到您的代码并检查或使用 Modernizer.js 或 normalizer.js。还要检查http://getbootstrap.com/getting-started/#browsers，它说包含 response.js 以启用媒体查询支持。
回答by Shana J
For me, it was my version of jquery. jQuery 2.0.2 didn't work well with bootstrap 3 in IE8 but jQuery 1.9.1 worked perfectly. Didn't test it with jQuery 1.10.1. Switch the version of jQuery and see if that works
对我来说，这是我的 jquery 版本。jQuery 2.0.2 与 IE8 中的 bootstrap 3 不能很好地工作，但 jQuery 1.9.1 工作得很好。没有用 jQuery 1.10.1 测试它。切换 jQuery 的版本，看看是否有效
回答by James A Mohler
Also you need to make sure your CSS is included via <link>and not @import
此外，您还需要确保您的 CSS 包含在 via<link>而不是@import
回答by Venu immadi
mainly check meta http-equiv tag, if it is not include in your file, add this
主要检查meta http-equiv标签，如果它不包含在你的文件中，添加这个
<meta http-equiv="X-UA-Compatible" content="IE=edge">
bootstrap3 workes fine with ie 8 only you have make sure to add respond.js , html5shiv .
bootstrap3 与 ie 8 一起工作正常，只有你确保添加 respond.js , html5shiv 。
like this:
像这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
回答by Vivek Vikranth
hey use modernizr js because i8 and earlier versions does'nt support bar's because it us html5.For that use modernizer js. :)
嘿使用 Modernizr js 因为 i8 和更早的版本不支持 bar 的因为它我们 html5.For 那使用 Modernizer js。:)
回答by Mike O'Connor
Now, in 2017, I just found out something that suggests that the various responses above--- involving html5shiv, respond.js and jquery<2.0--- are allnecessary.
现在，在 2017 年，我刚刚发现一些东西表明上面的各种响应——包括 html5shiv、respons.js 和 jquery<2.0——都是必要的。
It's this: go to the latest Bootstrap (now 3.3.7) here, then scroll down to collection of examples, and then click on the first "Navbars in action" on the left. You'll find that the Dropdown menu item works.
是这样的：在此处转到最新的 Bootstrap（现在是 3.3.7），然后向下滚动到示例集合，然后单击左侧的第一个“Navbars in action”。您会发现下拉菜单项有效。
Now take a look at the page source. And at the bottom, what do you see? You see jquery 1.12.4, that's what you see... not the latest which is 3+.
现在看一下页面源代码。在底部，你看到了什么？你看到 jquery 1.12.4，这就是你看到的......不是最新的 3+。
You can do a search for "jquery drop support for ie8" to see the numerous announcements.
您可以搜索“jquery drop support for ie8”以查看大量公告。
