CSS滤镜亮度使网格线消失答案

【问题标题】：CSS filter brightness makes gridlines vanishCSS滤镜亮度使网格线消失
【发布时间】：2017-06-27 16:40:31
【问题描述】：

我有一个应用了两个 CSS 亮度过滤器的表格：

#MyTable tr:nth-child(even)
{
  filter: brightness(85%);
}
#MyTable td:nth-child(even) 
{
    filter: brightness(85%);
}

当单个单元格的背景颜色可能不同时，清楚地描绘行和列。

但是黑色网格线（边框）的行为非常奇怪。

在 Firefox (51) 中：

所有过滤单元格的右侧和底部网格线都替换为背景颜色。白色单元格保持其网格线。无论过滤器应用于行、列还是两者，行为都是相同的。

在 Chrome (56) 中：

如果我只应用第一个过滤器，它会交替行亮度，那么偶数行中彩色单元格的顶部网格线和左侧网格线将变为与背景相同的颜色。白色单元格保持其网格线。

如果我只应用第二个过滤器，它交替列亮度，一切正常。

如果我同时应用这两个过滤器，偶数行但奇数列中彩色单元格的顶部和左侧网格线将变为与背景相同的颜色。同样，白色单元格、偶数列中的单元格（即有过滤器）或奇数行中的单元格（即没有过滤器）保持黑色网格线。

如果我使用类而不是 tr:nth-child(even) 选择偶数行，也会发生这种情况。

这是什么原因造成的，我该如何解决？

编辑 - 最小的工作示例：

<html>
    <head>
        <style>
        #MyTable {
            border-spacing: 0;
            border-collapse: collapse;
        }
        #MyTable td {
            margin: 0;
            padding: 20px;
            border: 1px solid black;
        }
        #MyTable tr:nth-child(even)
        {
            filter: brightness(85%);
        }
        #MyTable td:nth-child(even) 
        {
            filter: brightness(85%);
        }
        </style>
    </head>
    <body>
        <table id="MyTable">
            <tr>
                <td style="background-color: red;">A</td>
                <td style="background-color: red;">B</td>
                <td style="background-color: red;">C</td>
                <td style="background-color: red;">D</td>
                <td style="background-color: red;">E</td>
                <td style="background-color: red;">F</td>
            </tr>
            <tr>
                <td style="background-color: red;">A</td>
                <td style="background-color: red;">B</td>
                <td style="background-color: red;">C</td>
                <td style="background-color: red;">D</td>
                <td>E</td>
                <td style="background-color: red;">F</td>
            </tr>
            <tr>
                <td style="background-color: red;">A</td>
                <td style="background-color: red;">B</td>
                <td style="background-color: red;">C</td>
                <td style="background-color: red;">D</td>
                <td style="background-color: red;">E</td>
                <td style="background-color: red;">F</td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

我绝对不确定发生了什么，或者根据规范甚至应该发生什么。这可能是未定义的行为。

我确实注意到规则border-collapse: separate 将防止边框消失。

#MyTable {
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-spacing: 0;
  border-collapse: seperate;
}
#MyTable td {
  margin: 0;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
#MyTable tr:nth-child(even) {
  filter: brightness(85%);
}
#MyTable td:nth-child(even) {
  filter: brightness(85%);
}

<html>

<body>
  <table id="MyTable">
    <tr>
      <td style="background-color: red;">A</td>
      <td style="background-color: red;">B</td>
      <td style="background-color: red;">C</td>
      <td style="background-color: red;">D</td>
      <td style="background-color: red;">E</td>
      <td style="background-color: red;">F</td>
    </tr>
    <tr>
      <td style="background-color: red;">A</td>
      <td style="background-color: red;">B</td>
      <td style="background-color: red;">C</td>
      <td style="background-color: red;">D</td>
      <td>E</td>
      <td style="background-color: red;">F</td>
    </tr>
    <tr>
      <td style="background-color: red;">A</td>
      <td style="background-color: red;">B</td>
      <td style="background-color: red;">C</td>
      <td style="background-color: red;">D</td>
      <td style="background-color: red;">E</td>
      <td style="background-color: red;">F</td>
    </tr>
  </table>
</body>

</html>

【讨论】：

我添加了一个 MWE，希望可以解决问题。 '黑色网格线的行为很奇怪'，我的意思是'我正在使用边框折叠，并在所有行和列之间显示 1px 粗细的黑线，就像你在传统的印刷网格中看到的那样。这些黑线有时会改变颜色以匹配新的单元格背景颜色，详细说明。'
谢谢，我已经修改了我的答案/解决方法。 <tr> 上的 transform 规则绝对不能与 border-collapse 规则配合使用