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濾波器亮度使得網格線消失

回答

相關問題