我有一个应用了两个 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>
最佳答案
我绝对不确定发生了什么，或者根据规范甚至应该发生什么。这可能是未定义的行为。
我确实注意到规则 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>关于CSS滤镜亮度使网格线消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42140632/