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

Question

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

我可以做些什么来消除间距？

火狐、Chrome：

Safari：

JSFiddle --> 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 --> 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;
}