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

Question

我有一个空 table 或 div 与 display:table:

如果我现在向 table 添加边框 - 即使没有内容 - 我希望看到边框。

在Chrome和IE中是有边界的。在 Firefox 中 - 边框占据 space，但它是隐藏的。

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 添加到 table - Chrome 并且 IE 都遵守最小高度属性，但 Firefox 仍然隐藏 table完全。

DEMO

因此，为了让 table 在 Firefox 中获得高度 - table 需要内容或 a set height。

所以我想知道：这是一个 Firefox 错误，还是规范中有一个有效的 reason/source 隐藏了没有内容或设置高度的 table。

Answer 1

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

Answer 2

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

Answer 3

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

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders.

如您所见，它显示 "plus" 边框。不是 "minus".

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

Answer 4

此错误的解决方法是对元素使用 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:

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 不会限制 table 的高度，并且有效地表现得像 min-height 那样。

Answer 5

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

但是Chrome明白他们没有高度所以他设置为0:

欢迎使用浏览器渲染之间的差异！

Answer 6

指定高度即可满足您的需要。

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

Firefox hides tables with no content and no set height

html

css

firefox

cross-browser

css-tables

DEMO

DEMO

解决方法：

工作示例（JSFiddle）：

Specification: