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不起作用的问题，对于tables ， min-height和max-height是不确定的。

规格 ：

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

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

Answer 2

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

表的高度由'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

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