引導程序的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;
}