ブートストラップ4 navbarがIE11で正しくレンダリングされない

Question

私は設計仕様から構築したブートストラップ4応答性ナビゲーションバーを持っています。

これは、firefox、chrome、microsoft edge、およびoperaで正しく表示されます。

EDIT：それは以下のIE 11を参照してくださいイメージにひどくレンダリングしかし

：私はナビゲーションバーのdiv要素自体を削除する場合、それはにうまく働いた気づい下の画像を参照してください。 IE11、私は私が私の形で持っている構造とナビゲーションバーに入れたときに何か問題があるので....

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="navbar navbar-light navbar-expand-md fixed-top" role="navigation"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#">logo here</a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#loginNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
         <span class="navbar-toggler-icon"></span> 
 
        </button> 
 

 
     <div class="navbar-collapse collapse" id="loginNavbar"> 
 
     <nav class="nav ml-auto login-nav-right"> 
 

 
      <form method="post" role="form" class="login-form" action="#"> 
 
      <div class="row"> 
 
       <div class="col-lg-5 col-sm-5 px-2"> 
 
       <input class="form-control mr-sm-2" type="text" placeholder="Email" aria-label="Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value=""> 
 
       </div> 
 

 
       <div class="col-lg-5 col-sm-5 px-2"> 
 
       <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password" id="Password" name="Password"> 
 
       <a href="#" class="btn forgot-pass">Forgot Password</a> 
 
       </div> 
 

 
       <div class="col-lg-2 col-sm-2 px-2"> 
 
       <button class="btn default-btn align-right" type="submit" value="log in">log in</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </nav> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

bodyタグの直前のページの下にスクリプトを移動します。

あなたのCSSリンクの順序を変更し、残りの部分の後にブートストラップを置きます。ただし、自分のCSSは除きます。

編集：ブラウザのアップデートに関する問題でもあります。シークレットモードで開くか、ブラウザの履歴を消去してみてください。私は私の終わりに11のスニペットを開いて、それは絶対にうまくいくようです。あなたはそのページへのリンクを持っていますか？