CSS滤波器亮度使得网格线消失

我有两个CSS亮度滤波器的表应用于：CSS滤波器亮度使得网格线消失

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

清楚地界定的行和列时个体细胞可在背景颜色变化。

但黑色网格线（边界）表现得很奇怪。

在Firefox（51）：

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

在浏览器（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>

来源

2017-02-09 Ollyver

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

我注意到规则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>

来源

2017-02-09 16:10:01 Lars

我添加了一个MWE，希望清除的东西了。 '黑色网格线行为奇怪'，我的意思是'我正在使用边框折叠，并在所有行和列之间显示1px厚度的黑色线条，例如您可能在传统印刷网格中看到的。详细说明，这些黑线有时会改变颜色以匹配新的单元背景颜色。' – Ollyver

谢谢，我修改了我的答案/解决方法。 ''上的'transform'规则绝对不符合'border-collapse'规则 – Lars

CSS滤波器亮度使得网格线消失

回答

相关问题