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

我有一个空的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中变高-表格需要content或a set height。

所以我想知道:这是一个Firefox错误，还是从规范中找到了隐藏没有内容或设置高度的表的正当理由/来源？

最佳答案

此错误的解决方法是在元素上使用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;元素的默认table。您可以使用border-spacing: 0;删除多余的空格。

关于min-height不起作用的问题，min-height的max-height和tables的效果 undefined 。

Specification:



也没有太多理由使用它，因为指定height不会限制表格的高度，并且实际上表现得像min-height一样。