来自小提琴的代码

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及以下版本的支持。

任何人都有解决此问题的方法吗？

来自小提琴的代码

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

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>

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

AFTER 已包含所有css，以使其正常工作。

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

Answer 4

Vanilla 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：// protocol会破坏respond.js的执行）。

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

到您的代码并检查或使用modernizr.js或normalizer.js。另请查看http://getbootstrap.com/getting-started/#browsers，其中包含respond.js以启用媒体查询支持。

Answer 6

对我来说，这是我的jquery版本。 jQuery 2.0.2在IE8中与bootstrap 3不兼容，但jQuery 1.9.1运行得很好。没有用jQuery 1.10.1测试它。切换jQuery的版本，看看是否有效

Answer 7

嘿使用modernizr js因为i8和早期版本确实不支持吧，因为它是我们的html5。为此使用现代化器js。：）

modernizer

Answer 8

主要检查元http-equiv标签，如果它不包含在你的文件中，添加这个

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

bootstrap3工作得很好，即只有你确定要添加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]-->

Answer 9

此外，您需要确保通过<link>而不是@import

包含您的CSS

Answer 10

现在，在2017年，我发现了一些东西，表明上面涉及的各种回复---涉及html5shiv，respond.js和jquery＆lt; 2.0 ---是所有必要的。

它是这样的：转到最新的Bootstrap（现在3.3.7）here，然后向下滚动到collection of examples，然后点击第一个＆＃34; Navbars in action＆＃34;在左边。您会发现Dropdown菜单项有效。

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

您可以搜索＆＃34; jquery drop支持ie8＆＃34;看到无数的公告。

Twitter bootstrap 3 RC2 - IE8中的导航无法正常工作

来自小提琴的代码

10 个答案: