缩放时，Bootstrap Navbar未对齐

Question

我有一个简单的Bootstrap导航栏。 Chrome中的一切都运行正常，但在Safari（版本9.0.3）中，条形图可以按比例缩小，但不能缩放。当它向后缩放时，它会垂直“卡住”。

At full-size browser

When I scale back up to full-size browser after scaling down (which does work)

据我所知，这只发生在Safari中。

以下是导航的代码。

      <header>
    <!--Begin Nav. Nav stays inside header for margins-->
            <nav>
              <ul class="nav nav-pills nav-justified">
                <li><a href="#bio-portrait">Home</a></li>
                <li><a href="#books">Books</a></li>
                <li><a href="#publications">Publications</a></li>
                <li><a href="#courses">Courses</a></li>
                <li><a href="#reviews">Reviews</a></li>
                <li><a href="#speaking-other">Speaking</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </nav>
    <!--End Nav-->

        

除了顶部和底部的边框之外，Nav除了Bootstrap之外没有CSS属性。以下是相关内容：

header, body {
  margin: 5% 5% 5% 5%;
  line-height: 1.5;
  font-size: 100%;
}

nav {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

我已尝试将导航嵌套在.container-fluid中，但这也无济于事。