CSSフィルタ輝度がグリッド線は、私が適用2つのCSS輝度フィルタを有するテーブルを有する

を消滅させます。CSSフィルタ輝度がグリッド線は、私が適用2つのCSS輝度フィルタを有するテーブルを有する

しかし、黒のグリッド線（枠線）は非常に奇妙な動作をしています。 Firefoxの（51）で

：全濾過セルの

右と下部グリッド線は、背景色で置き換えられます。白いセルはグリッド線を維持します。フィルタは行、列、またはその両方に適用されるかどうかは同じです。クロム（56）において

：

I行の輝度を交互にちょうど最初のフィルタを適用する場合、トップグリッド線と偶数行における有色細胞の左グリッド線が背景と同じ色になります。白いセルはグリッド線を維持します。

カラムの明るさを変える2番目のフィルタを適用すると、すべて正常に動作します。

両方のフィルタを適用すると、偶数行の奇数列の色付きセルの上部グリッド線と左グリッド線が背景と同じ色になります。再び、白いセル、偶数列にあるセル（すなわちフィルタを有する）、または奇数列にある（すなわち、フィルタを有さない）セルは、黒色のグリッド線を維持する。

これは、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>

出典

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フィルタ輝度がグリッド線は、私が適用2つのCSS輝度フィルタを有するテーブルを有する

答えて

関連する問題