jquery - visibility :hidden of table-cell hides background-color of parent table-row

Question

我有一些使用 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 上的不透明度没有帮助。

有什么想法吗？这是故意的吗？

Answer 1

我会考虑使用 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>

*这可能不是错误，但我找不到任何描述此行为的规范