可见性:隐藏表单元格隐藏父表行的背景色 [英] visiblity:hidden of table-cell hides background-color of parent table-row

问题描述

我有一些使用display:table-row和display: table-cell构成的表格.在Firefox 52上，我可以使用visibility:hidden隐藏一个单元格元素，隐藏该单元格，但保留CSS定义的结构(而不​​是使用display:none).

I have some forms that are structured using display:table-row and display: table-cell. On Firefox 52, I could hide a cell element using visibility:hidden, hiding the cell but keeping the structure defined by CSS (instead of using display:none).

尽管在Firefox 64(以及chrome)上，当我隐藏单元格的可见性时，父表行在该位置上失去了背景色.

On Firefox 64 though (and also chrome), when I hide the visibility of the cell, the parent table-row loses its background color on that position.

以下是显示该问题的摘要:

Here's a snippet showing the issue:

#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的不透明度将无济于事.

I tried using opacity: 0 but some elements are clickable or have different events and opacity on 0 won't help.

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

Any thoughts? Is this intended?

推荐答案

我会考虑使用box-shadow来模拟背景色并避免出现此 bug *

I would consider box-shadow to simulate a background coloration and avoid this 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>

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

*it's probably not a bug but I am not able to find any specification describing this behavior

这篇关于可见性:隐藏表单元格隐藏父表行的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！