Bootstrap 3中的导航栏折叠在IE8中不起作用答案

【问题标题】：Navbar Collapse in Bootstrap 3 not working in IE8Bootstrap 3中的导航栏折叠在IE8中不起作用
【发布时间】：2015-08-05 01:42:50
【问题描述】：

我正在使用 Bootstrap 3 构建一个网站。我遵循了这个问题的每一个建议 - IE8 issue with 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>

提前致谢！

【问题讨论】：

标签： html css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

【解决方案1】：

我对类似 IE8 问题的解决方案：Bootstrap IE 8 issue related to Navbar (collapsed like mobile version)

可能的修复 1：

基本上，您需要避免将 CDN 用于 bootstrap.min.css。

要解决此问题，您需要下载 bootstrap.min.css 并将其放在应用程序的子目录中，如下所示：

/css/bootstrap/3.2.0/bootstrap.min.css

代码相关改动：

如果您使用 CDN 中的 bootstrap.min.css，如下所示，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

然后，将上面的代码替换为 bootstrap.min.css 的本地版本，如下所示：

<link rel="stylesheet" href="./css/bootstrap/3.2.0/bootstrap.min.css">

可能的修复 2：

如果您尝试运行存储在本地计算机上的 html 文件，仍然会出现类似的 IE8 问题。从 Web 服务器运行 html 文件将解决该问题。上面博文中给出了详细的解决方案。

【讨论】：

另外，如果您使用的是 CDN，Respond.js 需要代理。

【解决方案2】：

问题主要来自我们包含或调用引导组件的部分，即各种样式表 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.

我昨天做了同样的事情。这是我的完整代码：它是在 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>

【讨论】：