Bootstrap 4 Navbar nicht korrekt in IE11

Question

Ich habe eine Bootstrap 4 responsive Navbar, die ich aus einer Design-Spezifikation konstruiert habe.

Es wird korrekt in Firefox, Chrome, Microsoft Edge und Opera angezeigt. Siehe Bild unten:

aber es schrecklich in IE rendert 11. Siehe Bild unten:

EDIT: Ich habe bemerkt, wenn ich das navbar div selbst entfernt, es funktionierte gut in IE11, also ist etwas falsch, wenn ich es in eine Navbar mit der Struktur, die ich in meiner Form habe ....

<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

Verschieben Sie Ihre Skripts direkt vor dem Body-Tag an den unteren Rand der Seite.

Ändern Sie die Reihenfolge Ihrer CSS-Links und legen Sie den Bootstrap nach dem Rest von ihnen, außer Ihrem eigenen CSS.

Edit: Es könnte auch ein Browser-Update-Problem sein. Versuchen Sie, es im Inkognito-Modus zu öffnen, oder versuchen Sie, den Browserverlauf zu löschen. Ich habe den Ausschnitt in ie11 meinem Ende geöffnet und es scheint absolut einwandfrei zu funktionieren. Hast du einen Link zu der Seite?