Twitter bootstrap 3 RC2 - Điều hướng trong IE8 không hoạt động

Question

Tôi đang sử dụng Twitter Bootstrap 3 RC2 để tạo thanh điều hướng ở đầu trang của tôi hoạt động tốt ngoại trừ trong IE8.

Trong IE8 hoạt động như thể trình duyệt được tạo nhỏ, do đó menu bị thu gọn cho chế độ xem di động. Nhưng đây không phải là trường hợp.

Bây giờ tôi biết rằng TB3 vẫn là một công việc đang được tiến hành. Nhưng tôi muốn biết nếu có ai có một giải pháp cho việc này ở đây.

---

Nếu bạn muốn kiểm tra vấn đề của tôi với IE8, sau đó nhìn ở đây:

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

(bạn cần liên kết trực tiếp, bởi vì JSFiddle nó tự không làm việc với IE8)

Và đây là JSFiddle:

http://jsfiddle.net/DnwJN/

---

Bạn sẽ thấy thanh điều hướng hoạt động tốt trong mọi trình duyệt khác. Ngay cả IE9. Nhưng không phải IE8. Và TB3 không hỗ trợ IE8. Họ chỉ bỏ hỗ trợ cho IE7 trở xuống.

Bất kỳ ai có giải pháp cho vấn đề này?

---

Mã này từ 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> 

Answer 1

Hope this helps ...

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

hey sử dụng js Modernizr vì i8 và phiên bản trước does'nt hỗ trợ thanh vì nó chúng ta html5.For rằng js sử dụng nhà hiện đại hóa. :)

modernizer

Answer 3

Hãy thử thêm

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

để mã của bạn và kiểm tra hoặc sử dụng modernizer.js hoặc normalizer.js. Ngoài ra, hãy kiểm tra http://getbootstrap.com/getting-started/#browsers nơi nó nói để bao gồm respond.js để bật hỗ trợ truy vấn phương tiện.

Answer 4

sau khi thêm html5shim tôi vẫn còn gặp vấn đề với menu thả xuống trong IE8.
tìm thấy bài viết này https://github.com/twbs/bootstrap/issues/6548 giải thích rằng bộ lọc đang cản trở. bootstrap có một bộ lọc mặc định trên thanh điều hướng để bạn phải xóa nó. đây là những gì làm việc cho tôi.

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

chủ yếu là kiểm tra thẻ meta http-equiv, nếu nó không được bao gồm trong tập tin của bạn, thêm

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

bootstrap3 này workes tốt với IE 8 duy nhất bạn phải chắc chắn để thêm respond.js, html5shiv.

như thế này:

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

Ngoài ra, hãy lưu ý về thực tế là bạn phải bao gồm mã này:

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

SAU tất cả các css đã được đưa cho nó hoạt động đúng .

Answer 7

Ngoài ra, bạn cần phải chắc chắn CSS của bạn được bao gồm qua <link> và không @import

Answer 8

Đối với tôi, nó là phiên bản của tôi về jquery. jQuery 2.0.2 không hoạt động tốt với bootstrap 3 trong IE8 nhưng jQuery 1.9.1 hoạt động hoàn hảo. Không thử nghiệm nó với jQuery 1.10.1. Chuyển đổi phiên bản của jQuery và xem liệu nó có hoạt động hay không

Answer 9

Vanilla Bootstrap 3 sử dụng jQuery 2 theo mặc định. Vì vậy, để làm cho nó làm việc trong IE8, bạn phải thay đổi phiên bản jQuery đến dưới jQuery 2.

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

Bao gồm hai kịch bản sau đây:

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

Quan trọng nhất là sử dụng một máy chủ web để xem trang web của bạn (với giao thức http: // hoặc https: //, vì giao thức file: // sẽ phá vỡ sự thực thi của response.js).

Answer 10

Bây giờ, trong năm 2017, tôi vừa phát hiện ra điều gì đó gợi ý rằng các câu trả lời khác nhau ở trên --- liên quan đến html5shiv, response.js và jquery < 2.0 --- là tất cả cần thiết.

Đó là điều này: truy cập Bootstrap mới nhất (hiện tại 3.3.7) here, sau đó cuộn xuống collection of examples và sau đó nhấp vào "Navbars in Action" đầu tiên ở bên trái. Bạn sẽ thấy rằng mục menu thả xuống hoạt động.

Bây giờ, hãy xem nguồn trang. Và ở phía dưới, bạn thấy gì? Bạn thấy jquery 1.12.4, đó là những gì bạn thấy ... không phải là mới nhất là 3+.

Bạn có thể thực hiện tìm kiếm "hỗ trợ thả jquery cho ie8" để xem nhiều thông báo.