Twitter Bootstrap 3 RC2 - 在IE8中导航无法工作

Question

我正在使用 Twitter Bootstrap 3 RC2 创建一个位于页面顶部的导航栏，除了在IE8中遇到问题以外一切正常。

在IE8中，它的行为就像浏览器缩小了一样，因此菜单会折叠为移动视图。但事实并非如此。

现在我知道TB3仍在不断改进中，但我想知道这里是否有人对此有解决方法。

---

如果您想检查我的IE8问题，请看这里:

http://jsfiddle.net/DnwJN/embedded/result/

(您需要直接链接，因为JSFiddle本身无法在IE8上运行)

下面是JSFiddle链接:

http://jsfiddle.net/DnwJN/

---

您将看到导航栏在其他浏览器中都正常工作，甚至在IE9中也是如此。但不是在IE8中。而TB3确实支持IE8。他们只放弃了对IE7及以下版本的支持。

有没有人能提供此问题的解决方案？

---

来自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>

- Vivendi

Answer 1

希望这可以帮助到你...

来自 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>

- Goran Jurić

Answer 2

此外，请注意您需要包含此代码：

<!--[if lt IE 9]>
  <script src="${rc.getContextPath()}/js/vendor/html5shiv.js"></script>
  <script src="${rc.getContextPath()}/js/vendor/respond.min.js"></script>
<![endif]-->

在所有的 CSS 都被包含进来之后，它才能正常工作。

- Ronner

Answer 3

在添加了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;
}

- xeo

---

运行得非常好，但是您不需要 background-color 和 border-color :) - balexandre

Answer 4

原版的Bootstrap 3使用jQuery 2作为默认版本。因此，如果要在IE8中正常运行，必须将jQuery版本更改为低于jQuery 2。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请包含这两个脚本：

<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>

最重要的是，使用Web服务器查看您的网站（使用http://或https://协议，因为file://协议会破坏respond.js的执行）。

- Artvader

---

现在是2017年。您关于使用旧版jquery的提示是唯一对我有效的方法，特别是在Bootstrap 3.3.7中。 - Mike O'Connor

Answer 5

尝试添加。

<!-- 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]-->

将以下代码添加到您的代码中并检查或使用modernizer.js或normalizer.js。 同时，请查看http://getbootstrap.com/getting-started/#browsers，其中提到包括respond.js以启用媒体查询支持。

- mascot6699

Answer 6

对我来说，它是我的jquery版本。jQuery 2.0.2在IE8中与bootstrap 3不兼容，但是jQuery 1.9.1完美地工作。没有使用jQuery 1.10.1进行测试。更改jQuery版本并查看是否有效。

- Shana J

Answer 7

主要检查meta http-equiv标记，如果在您的文件中没有包含它，请添加上。

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Bootstrap3在IE8上运行良好，但需要确保添加respond.js和html5shiv。

像这样：

<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]-->  

- Venu immadi

Answer 8

现在，2017年，我刚刚发现了一些东西，表明上面各种回答中涉及的html5shiv、respond.js和jquery<2.0都是必需的。

就是这个：转到最新的Bootstrap（现在是3.3.7）这里，然后向下滚动到示例集合，然后单击左侧的第一个“Navbars in action”。您会发现下拉菜单项有效。

现在看看页面源代码。在底部，你看到什么？你看到的是jquery 1.12.4……而不是最新的3+。

您可以搜索“jquery drop support for ie8”以查看众多公告。

- Mike O'Connor

Answer 9

另外，您需要确保通过<link>而不是@import来包含您的CSS。

- James A Mohler

Answer 10

嘿，使用modernizr js，因为i8及更早版本不支持bar，因为它是html5。为此，请使用modernizer js。:)

modernizer

- Vivek Vikranth

---

这与它使用 nav 没有任何关系。如果浏览器不支持一个元素，比如在这个例子中的 nav，那么它就会被视为一个 div。你也可以从这个例子中看到，导航栏仅由 div 创建：http://getbootstrap.com/examples/starter-template/。我认为这是媒体查询中的一个 bug。 - Vivendi

是的，在媒体查询中更改IE的可见性类。 - Vivek Vikranth