Question

我有一张表格，其中应用了两个CSS亮度滤镜：

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

在单个单元格的背景颜色不同时，可以清楚地描述行和列。

但黑色网格线（边框）表现得非常奇怪。

在Firefox（51）中：

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

在Chrome（56）中：

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

如果我只应用第二个滤镜，它会改变列亮度，一切正常。

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

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

造成这种情况的原因是什么，以及如何解决？

编辑 - 最小的工作示例：

<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>

Answer 1

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

我注意到规则border-collapse: separate会阻止边框消失。

＆＃13;

#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%);
}

＆＃13;

<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>

＆＃13;

CSS滤镜亮度使网格线消失

1 个答案: