Bootstrap 导航栏在 IE11 上没有正确居中

Question

我正在制作一个非常简单的 bootstrap 导航栏原型，我想要它的最大宽度为 600 像素，以屏幕为中心并固定在顶部。

这是 html 代码：

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

这在 Chrome 和 Firefox 上运行良好。但是在 IE11 上，导航栏没有居中而是固定在屏幕的左侧（正确应用了 600px 的宽度）。

查看检查屏幕后，我可以将问题缩小到 'position:fixed' 属性应用于 .navbar-fixed-bottom 和 .navbar-fixed-top 类 (bootstrap.min.css(5))。当我在 IE 检查 window 中取消选择 'position:fixed' 属性时，位置变为 'static' 并且导航栏居中。请注意，'position:static' 也不是我要找的，因为导航栏显然不再固定在屏幕顶部。

有谁知道为什么 IE 在将 'position:fixed' 属性应用于导航元素时不能正确居中导航栏，而它在其他浏览器上工作正常？是否有任何现有的解决方法？

如果我在这里做的不正确，请告诉我。

Answer 1

因为 max-width 它不起作用。试试这个：

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

Answer 2

这是由于 navbar-fixed-top class。只需申请 width: 100% 就可以了。

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

Bootstrap 导航栏在 IE11 上没有正确居中

Bootstrap navbar not centered properly on IE11

css

navbar

twitter-bootstrap

internet-explorer-11