html - 显示 :table-cell element has a wrong alignment on Firefox 内的 Bootstrap NAV 元素

Question

考虑这个 HTML 标记(包括 Bootstrap 库):

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

我已经用谷歌搜索了很多，但仍然无法理解为什么 Firefox 显示的代码与 Chrome 不同。它只是为带有导航栏的表格单元格 div 提供某种填充/边距，然后它不与顶部的其他内容表格单元格对齐。看图片:

有人在使用 Firefox/Bootstrap 时遇到过这种问题吗？我将不胜感激任何帮助，提前致谢!

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

Answer 1

此间隙是一个空文本行，由默认 Bootstrap “:before”样式引起。你可以用类似的东西隐藏它:

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