Firefox隐藏没有内容且没有设置高度的表

Question

我有空table或div有display:table:

如果我现在为表添加边框 - 即使没有内容 - 我希望看到边框.

在Chrome和IE中有边框.在Firefox中 - 边框占用空间,但它是隐藏的.

DEMO

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>

同样,我甚min-height至可以添加一个表 - Chrome和IE都尊重min-height属性,但Firefox仍然完全隐藏了表.

DEMO

因此,为了使表在Firefox中获得高度 - 表需要内容或设置高度.

所以我想知道:这是一个firefox错误,还是规范中有一个有效的原因/来源,隐藏了没有内容或设置高度的表.

Answer 1

此错误的解决方法是在元素上使用CSS生成的内容.即使设置一个空字符串也可以解决问题,因为它是空白的,所以这样做不会产生任何负面影响.

解决方法:

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;的table元素仍然会被渲染.您可以使用border-spacing: 0;删除额外的间距.

关于min-height不工作的问题,影响min-height和max-height未定义tables.

规格:

在CSS 2.1中,'min-height'和'max-height'对表,内联表,表格单元格,表格行和行组的影响未定义.

也没有太多理由使用它,因为指定a height不会限制表的高度,并且有效地表现得如此min-height.