我使用Twitter Bootstrap 3 RC2在我的页面顶部创建一个导航栏，除了在IE8中工作正常。Twitter bootstrap 3 RC2 - 导航IE8不工作

在IE8中的行为就好像浏览器变小了一样，以便菜单崩溃用于移动视图。但这种情况并非如此。

现在我知道TB3仍然是一项工作。但我想知道是否有人在这里有一个解决方案。

如果你想检查我与IE8的问题，然后看看在这里：

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

（你所需要的直接联系，因为它的jsfiddle自不与IE8工作）

这里是的jsfiddle：

http://jsfiddle.net/DnwJN/

你会看到navbar在其他所有浏览器中工作正常。甚至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>

来源

2013-08-17 Vivendi

希望这有助于...

从http://getbootstrap.com/getting-started/：在IE8下拉

<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) --> 
    <script src="js/respond.js"></script> 
</body>

来源

2013-08-17 18:23:46

这对我不起作用 – boje

哎使用Modernizr的JS，因为I8及更早版本一点儿也不支持酒吧的，因为我们html5.For在使用近代化的JS。 :)

modernizer

来源

2013-08-17 09:19:15

这与使用'nav'的事实无关。如果浏览器不支持一个元素，比如在这种情况下使用'nav'，那么它就被视为一个'div'。您还可以从这个示例中看到，仅在divs外创建navbar的位置：http://getbootstrap.com/examples/starter-template/。我认为这是一个媒体查询中的错误。 – Vivendi

是换ie的visiblilty类（在媒体查询中） –

尝试增加

<!-- 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以启用媒体查询支持。

来源

2013-08-17 10:25:14 mascot6699

加入html5shim后，我仍然有问题。
发现这篇文章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; 
}

来源

2013-08-27 05:34:55 xeo

像一个魅力一样工作，但你不需要'background-color'和'border-color' :) – balexandre

谢谢，这个为我工作呢！ –

谢谢，你摇滚！ – jacksun101

主要检查META HTTP-当量标签，如果不是在你的文件包括，增加这

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

bootstrap3 workes罚款与IE 8只你必须确保添加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]-->

来源

2013-10-17 09:40:50

而且，利用这样的事实，你必须包含这个代码注：

<!--[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已被列入为它正常工作。

来源

2013-10-26 11:33:44 Ronner

我越来越疯狂了！所有的CSS后！谢谢.. –

另外你需要确保你的CSS通过<link>包括不@import

来源

2013-11-18 22:44:07

对我来说，这是我的版本的jQuery。 jQuery 2.0.2在IE8的bootstrap 3中不能很好地工作，但jQuery 1.9.1完美运行。没有用jQuery 1.10.1进行测试。切换jQuery的版本，看看是否可行

来源

2013-12-19 15:55:46

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：//协议会中断respond.js的执行）。

来源

2014-09-17 07:11:02 Artvader

现在是2017年。关于使用旧的jquery的提示是唯一已经为我工作的Bootstrap 3.3.7。 –

现在，在2017年，我刚发现的东西，表明上述---涉及html5shiv，respond.js和jQuery < 2.0 ---各方面的反应都所有必要的。

那就是：去最新的自举（今3.3.7）here，然后向下滚动到collection of examples，然后单击第一个“导航栏在行动”就离开了。你会发现下拉菜单项有效。

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

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

来源

2017-03-01 04:04:33

Twitter bootstrap 3 RC2 - 导航IE8不工作

代码从小提琴

回答

相关问题