html – Firefox隐藏没有内容,没有设置高度的表

我有一个空的表或div与显示：表：

如果我现在添加一个边框到表 – 即使没有内容 – 我希望看到边框.

在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>

同样,我甚至可以在桌子上添加一个最小高度 – Chrome和IE都尊重min-height属性,但Firefox仍然完全隐藏表格.

DEMO

所以为了使表在Firefox中获得高度 – 表需要内容或a set height.

所以我想知道：这是一个firefox的bug,还是有一个有效的原因/来源,规定没有内容或设置高度的表是隐藏的.

解决方法

这个错误的解决方法是在元素上使用 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;表格元素仍将呈现.你可以使用border-spacing：0;去除额外的间距.

在最小高度不工作的问题上,最小高度和最大高度的影响对于表格是未定义的.

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.

也没有太多的理由使用它,因为指定高度并不限制表的高度,并且有效地表现为最小高度.

原文地址：https://www.jb51.cc/html/230657.html