我有一个空的表或div与显示：表：
如果我现在添加一个边框到表 – 即使没有内容 – 我希望看到边框.
在Chrome和IE中有一个边框.在Firefox中 – 边框占用空间,但它是隐藏的.
table,div {
width: 200px;
background: tomato;
margin-bottom: 20px;
border: 2px solid black;
}
div + div,table + table {
background: green;
height: 200px;
}
div {
display: table;
}
<div></div> <div></div> <table></table> <table></table>
同样,我甚至可以在桌子上添加一个最小高度 – Chrome和IE都尊重min-height属性,但Firefox仍然完全隐藏表格.
所以为了使表在Firefox中获得高度 – 表需要内容或a set height.
所以我想知道：这是一个firefox的bug,还是有一个有效的原因/来源,规定没有内容或设置高度的表是隐藏的.
解决方法
这个错误的解决方法是在元素上使用
CSS generated content.即使设置一个空字符串也解决了这个问题,并且由于它是空白的,所以不应该有这样的负面影响.
解决方法：
table:after,div:after {
content: "";
}
工作实例(JSFiddle)：
table,div {
width: 200px;
background: tomato;
margin-bottom: 20px;
border: 2px solid black;
}
div + div,table + table {
background: green;
height: 200px;
}
div {
display:table;
}
table:after,div:after {
content: "";
}
<div></div> <div></div> <table></table> <table></table>
请注意,在上面的示例中,默认的border-spacing：2px;表格元素仍将呈现.你可以使用border-spacing：0;去除额外的间距.
在最小高度不工作的问题上,最小高度和最大高度的影响对于表格是未定义的.
In CSS 2.1,the effect of ‘min-height’ and ‘max-height’ on tables,inline tables,table cells,table rows,and row groups is undefined.
也没有太多的理由使用它,因为指定高度并不限制表的高度,并且有效地表现为最小高度.
