display:table 上的水平 space 在 Safari 上对齐 bootstrap 导航栏

Question

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

我该怎么做才能消除间距？

火狐，Chrome：

野生动物园：

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

display:table 上的水平 space 在 Safari 上对齐 bootstrap 导航栏

Horizontal space on display:table justified bootstrap navbar on Safari

css

safari

mobile-safari

twitter-bootstrap