我有一个空的 table
或 div
with 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 错误,还是规范中有正当理由/来源隐藏了没有内容或设置高度的表格。
最佳答案
此错误的解决方法是使用 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
的影响和 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
不限制表格的高度,并且有效地表现为 min-height
会的。
关于html - Firefox 隐藏没有内容和高度的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28525712/