IE 上的引导对齐导航行为答案

【问题标题】：Bootstrap justified-nav behavior on IEIE 上的引导对齐导航行为
【发布时间】：2015-08-06 23:25:17
【问题描述】：

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

我现在有一个项目，这很重要...有什么想法可以在 IE 上获得相同的行为，然后在 Chrome/Webkit/Firefox 上？

编辑：它取决于内部 a 元素的宽度

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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>

【讨论】：