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 中获得高度 - 表格需要内容或 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>

请注意，在上面的示例中，table 元素的默认 border-spacing: 2px; 仍将被渲染。您可以使用border-spacing: 0; 删除多余的间距。

关于min-height不起作用的问题，min-height和max-height对tables的影响是未定义的。

Specification:

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

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

Answer 2

在检查器中突出显示空元素表明空表框正在以等于-(border-top-width + border-bottom-width) 的使用高度呈现。这种行为的荒谬性基本上证实了它是一个错误，但如果你绝对需要参考，spec 说：

表格的高度由 'table' 或 'inline-table' 元素的 'height' 属性给出。 'auto' 值表示高度是行高加上任何单元格间距或边框的总和。

如您所见，它表示“加号”边框。不是“减号”。

请注意，这些框确实存在，因为它们仍然有边距。由于某种原因，它们只是以负高度呈现。

Answer 3

将table, div 设置为height: 0; 对我有用，是的，奇怪的东西，但如果它不需要任何内容​​，这应该没问题。

Answer 4

据我所知，Firefox 不允许在使用 display: table 样式的元素上使用 min-height。因此建议将min-height 更改为height，它应该可以工作。我提到了这个Bug

Answer 5

您需要定义高度，如果没有定义，FF 不会自动设置高度，所以他知道它们是 2px + 2px 的边框，他通过将高度设置为 -4px 将其删除，如您所见计算检查员：

但是 Chrome 知道它们没有高度，所以他设置为 0：

欢迎了解浏览器渲染的区别！

Answer 6

指定高度将满足您的需求。