css - IE 上的 Bootstrap justified-nav 行为

Question

如果看官方例子http://getbootstrap.com/examples/justified-nav/我注意到在 IE 11 上 li 元素的宽度是合理的并且共享相同的宽度〜例如所有 li 元素都约为 190px)。在 Chrome/Webkit/Firefox 浏览器等上，这会有所不同(例如，第一个 li 175px，第二个 li 192px 等)。

我现在有一个元素，它非常重要......有什么想法可以在 IE 和 Chrome/Webkit/Firefox 上获得相同的行为吗？

编辑:这取决于内部 a 元素的宽度

Answer 1

让每个单元格(li 元素)等宽的关键是将父元素设置为display:table 和table-layout:fixed。并将列表元素宽度设置为 100%。

添加/更改以下声明:

.nav-justified {
  display: table;
  table-layout: fixed;
}

.nav-justified > li {
  width: 100%;
}

编辑:添加了演示片段

.nav-justified {
    /* New declarations*/
    display: table;
    table-layout: fixed;
}

/* Use of greater selector specificity and !important is for demonstration purposes */
nav .nav-justified > li {
    /* New declarations*/
    width: 100% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>