我使用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不工作

代碼從小提琴

回答

相關問題