html - Firefox 隐藏没有内容和高度的表格

Question

我有一个空的 table 或 div with 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 中获得高度 - 表格需要内容或 a set height .

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

Answer 1

此错误的解决方法是使用 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 .

Specification :

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.

也没有太多理由使用它，因为指定了 height不限制表格的高度，并且有效地表现为 min-height会的。