我有一些使用 display:table-row 和 display:table-cell 构建的表单。在 Firefox 52 上，我可以使用 visibility:hidden 隐藏单元格元素，隐藏单元格但保留 CSS 定义的结构(而不是使用 display:none)。
虽然在 Firefox 64(以及 chrome)上，当我隐藏单元格的可见性时，父表行在该位置失去其背景颜色。
这是显示问题的片段:
#tableRow{
display: table-row;
background-color: #f5f5f5;
}
.cell{
display:table-cell;
}
#hide{
visibility:hidden;
}<div id="tableRow">
<a href="#" class="cell">Visible</a>
<a href"#" class="cell"id="hide">Not visible</a>
<a href="#" class="cell">Visible</a>
</div>
我试过使用 opacity: 0 但有些元素是可点击的或者有不同的事件，0 上的不透明度没有帮助。
有什么想法吗？这是故意的吗？
最佳答案
我会考虑使用 box-shadow 来模拟背景着色并避免这个bug *
.container {
display: table;
}
#tableRow {
display: table-row;
box-shadow: -100vw 0 0 red inset;
}
.cell {
display: table-cell;
padding: 10px;
}
#hide {
visibility: hidden;
}<div class="container">
<div id="tableRow">
<a href="#" class="cell">Visible</a>
<a href="#" class="cell" id="hide">Not visible</a>
<a href="#" class="cell">Visible</a>
</div>
</div>
*这可能不是错误，但我找不到任何描述此行为的规范
关于jquery - visibility :hidden of table-cell hides background-color of parent table-row，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53913917/