Bootstrap navbar nicht richtig zentriert auf IE11

Question

Ich bin Prototyping eine sehr einfache Bootstrap Navbar, die ich mit einer maximalen Breite von 600px, auf dem Bildschirm zentriert und oben fixiert werden soll.

Dies ist der HTML-Code:

.navbar { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">MyLink</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

, die gut auf Chrome und Firefox funktioniert. In IE11 ist die Navigationsleiste jedoch nicht zentriert und bleibt stattdessen links vom Bildschirm (die Breite von 600px wird korrekt angewendet).

Nachdem ich den Inspektionsbildschirm angesehen habe, konnte ich das Problem auf die Eigenschaft 'position: fixed' für die Klassen .navbar-fixed-bottom und .navbar-fixed-top eingrenzen (bootstrap.min.css (5)). Wenn ich die Eigenschaft 'position: fixed' im IE-Inspektionsfenster abnehme, wird die Position 'statisch' und die Navigationsleiste wird zentriert. Beachten Sie, dass "position: static" nicht das ist, wonach ich suche, denn dann ist die Navigationsleiste offensichtlich nicht mehr oben auf dem Bildschirm fixiert.

Weiß jemand, warum IE die navbar nicht richtig mit der "Position: örtlich festgelegten" Eigenschaft zentrierte, die auf das nav Element angewendet wurde, während es für anderen Browser gut funktioniert? Gibt es eine vorhandene Problemumgehung dafür?

Bitte lassen Sie mich wissen, wenn ich hier die Dinge nicht richtig mache.

Answer 1

Dies ist aufgrund der navbar-fixed-top Klasse. Einfach anwenden width: 100% und Sie sollten gut sein.

.navbar.navbar-default { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">MyLink</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

es dosen't Arbeit wegen max-width .try dieser:

.navbar { 
width: 600px; 
margin: 0 auto; 
}