css - Bootstrap 导航栏在 IE11 上未正确居中

Question

我正在制作一个非常简单的 Bootstrap 导航栏原型(prototype)，我想要它的最大宽度为 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 上，导航栏没有居中而是固定在屏幕的左侧(正确应用了 600 像素的宽度)。

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

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

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

Answer 1

这是由于 navbar-fixed-top 类。只需应用 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>