引导程序的display：table-cell元素内的NAV元素在Firefox上的对齐方式错误

Question

考虑以下HTML标记（包括Bootstrap lib）：

<div class="container">
  <div class="card">
    <ul class="nav list">
      <li class="element">
        <a href="#">Element</a>
        </li>
      <li class="element">
      <a href="#">Another element</a>
        </li>
    </ul>
    <div class="content">
     <div>
       First content
     </div>
     <div>
       Second content
     </div>
    </div>
  </div>
</div>

和此CSS代码：

.container { 
  display: table;
  layout: table-fixed;
}
.card {
  display: table-row;
  width: 300px;
}

li {
  display: inline-block;
  background-color: red;
  padding: 20px;
}

.list {
  display: table-cell;
  width: 100px;
  white-space: nowrap;
}

.content {
  display: table-cell;
  width: 200px;
  background-color:blue;
  height: 200px;
}

我已经在Google上进行了很多搜索，但是仍然不清楚为什么Firefox显示的代码与Chrome不同。 它只是为带有navbar的表单元格div提供某种填充/边距，然后它与顶部的另一个内容表单元格不对齐。 看图片：

有没有人遇到过Firefox / Bootstrap这类问题。 我将不胜感激，在此先感谢您！

现场演示： https : //jsfiddle.net/9cztjd6o/3/

Answer 1

此间隙是一个空文本行，由默认引导程序“：before”样式引起。 您可以使用以下方式将其隐藏：

.container:before, .list:before {
  display: none;
}