引导的显示器内部NAV元素：表单元格元素对火狐

Question

错误对准

考虑这个HTML标记（与引导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; 
} 

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

有没有人遇到这种类型的问题与Firefox /引导。我会感谢任何帮助，提前致谢！

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

Answer 1

这种差距是由标准的引导造成的空行“：之前”的风格。你可以用类似的东西来隐藏它：

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