twitter-bootstrap Bootstrap 3 中的导航栏折叠在 IE8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24182247/
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
Navbar Collapse in Bootstrap 3 not working in IE8
提问by learner123
I am building a website using Bootstrap 3. I followed every suggestion from this question - IE8 issue with Twitter Bootstrap 3. I have included respond.js and html5shiv.js files and everything is working fine except the navbar-collapse. Here's the navbar-collapse code:
我正在使用 Bootstrap 3 构建一个网站。我遵循了这个问题的所有建议 - IE8 问题与 Twitter Bootstrap 3。我已经包含了 respond.js 和 html5shiv.js 文件，除了导航栏折叠外，一切正常。这是导航栏折叠代码：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#"><img src="image.png" width="143" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right" id="nav-right">
<li><a href="#">Home</a></li>
<li><a href="#"><a>About</a></li>
</ul>
</div>
Thanks in advance!
提前致谢！
回答by Blesson Jose
My solution to a similar IE8 issue: Bootstrap IE 8 issue related to Navbar (collapsed like mobile version)
我对类似 IE8 问题的解决方案：Bootstrap IE 8 issue related to Navbar (collapsed like mobile version)
Possible Fix 1:
可能的修复 1：
Basically, you need to avoid using CDN for bootstrap.min.css.
基本上，您需要避免将 CDN 用于 bootstrap.min.css。
To fix the issue, you need to download bootstrap.min.css and place it in a subdirectory of your application, something like below:
要解决此问题，您需要下载 bootstrap.min.css 并将其放在应用程序的子目录中，如下所示：
/css/bootstrap/3.2.0/bootstrap.min.css
/css/bootstrap/3.2.0/bootstrap.min.css
Related change in code:
代码中的相关更改：
If you are using bootstrap.min.css from a CDN like given below,
如果您正在使用如下所示的 CDN 中的 bootstrap.min.css，
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
then, replace the above code with a local version of bootstrap.min.css like given below:
然后，用本地版本的 bootstrap.min.css 替换上面的代码，如下所示：
<link rel="stylesheet" href="./css/bootstrap/3.2.0/bootstrap.min.css">
Possible Fix 2:
可能的修复 2：
Similar IE8 issue can still occur if you are trying to run the html file stored on local machine. Running the html file from a web server will solve the issue. Detailed solution given in the above blog post.
如果您尝试运行存储在本地计算机上的 html 文件，仍然会出现类似的 IE8 问题。从 Web 服务器运行 html 文件将解决该问题。上面的博客文章中给出了详细的解决方案。
回答by suman
Mostly the problem comes from the part where we include or call the bootstrap components i.e various style-sheets java-scripts files.As per my experience when we include more bootstrap files then needed it causes conflict.I myself have done this navbar yesterday and had problem. The solutions might be:
大多数问题来自我们包含或调用引导程序组件的部分，即各种样式表 java-scripts 文件。根据我的经验，当我们包含更多引导程序文件然后需要时它会导致冲突。我自己昨天做了这个导航栏并且有问题。解决方案可能是：
1.Don't include unnecessary files,brings conflict.
2.always keep the jquery file above bootstrap.js file
3.Use the latest version as far as it is reachable to you.
I have done the same thing yesterday.Here goes my complete Code: It is done in ASP.NET using visual studio 10.
我昨天做了同样的事情。这是我的完整代码：它是在 ASP.NET 中使用 Visual Studio 10 完成的。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="nav.aspx.cs" Inherits="nav" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">toggle</span>
<span class="icon-bar"></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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="">helo</a></li>
<li><a href="">by</a></li>
<li><a href="">hy</a></li>
</ul>
</div>
</nav>
</div>
</form>
