显示的水平空间：Safari上的表格对齐引导导航栏

Question

在桌面和iOS版本的Safari上 - 一个神秘的水平空间被添加到一个合理的bootstrap 3导航栏菜单的两侧。

如何删除间距？

Firefox，Chrome：

Safari浏览器：

JSFiddle - ＆gt; https://jsfiddle.net/Lscerkzx/1/

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li class="active"><a href="#">Link 4</a></li>
</ul>
</nav>

.navbar-nav {
    margin: 0 auto;
    display: table;
    table-layout: auto;
    float: none;
    width: 100%;
}
.navbar-nav>li {
    display: table-cell;
    float: none;
    text-align: center;
}
.navbar {
    background-color: black;
    border-radius: 0;
}
li {
    border: 1px solid red;
}

我还尝试使用' table-layout：fixed '，这在某些情况下似乎有效。但如果可能，我不想使用它。

JSFiddle - ＆gt; https://jsfiddle.net/Lscerkzx/2/

.navbar-nav {
    margin: 0 auto;
    display: table;
/*      table-layout: auto; */
    table-layout: fixed;
    float: none;
    width: 100%;
}
.navbar-nav>li {
    display: table-cell;
    float: none;
    text-align: center;
    width: 100%; //added
}

Answer 1

导航上的:before会应用一些样式。如果你添加它，你的问题应该修复！

.nav:before {
  display: none;
}