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

Question

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

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

在Chrome和IE中有边框。在Firefox中 - 边框占用空间，但它是隐藏的。

DEMO

＆＃13;

＆＃13;

table,
div {
  width: 200px;
  background: tomato;
  margin-bottom: 20px;
  border: 2px solid black;
}
div + div,
table + table {
  background: green;
  height: 200px;
}
div {
  display: table;
}

＆＃13;

<div></div>
<div></div>

<table></table>
<table></table>

＆＃13;

＆＃13;

＆＃13;

同样，我甚至可以在表格中添加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和[{1}}的效果未定义为max-height。

Specification

  

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

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

Answer 2

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

  

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

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

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

Answer 3

将table, div设置为height: 0;对我来说是个窍门，是一件奇怪的事情，但如果它不需要任何内容​​，这应该没问题。

Answer 4

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

Answer 5

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

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

欢迎使用浏览器渲染之间的区别！

Answer 6

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