ブラウザ間でテーブル行のボックス シャドウを一貫して行うにはどうすればよいですか?

ブラウザ間でテーブル行のボックス シャドウの一貫性を最適化する

CSS を使用してテーブル行にボックス シャドウを適用すると、異なるブラウザ間で動作が一貫しない場合があります。一部のブラウザでは、期待どおりに影が表示されますが、他のブラウザでは表示されません。

問題の理解

この問題は、ブラウザがハードウェア アクセラレーションを使用してテーブルをレンダリングするときに発生します。これにより、テーブルのレンダリングが妨げられる場合があります。

Transform プロパティを使用した修正

この問題に対処するための解決策には、box-shadow とともに Transform プロパティを使用することが含まれます。変換プロパティをscale(1)に設定すると、ハードウェア アクセラレータを使用せずにブラウザで要素をレンダリングするようになり、ボックス シャドウが正しく表示されるようになります。

修正を実装する CSS コードは次のとおりです:

<code class="css">tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}</code>

このコードを CSS に追加すると、ハードウェア アクセラレーションをサポートするすべてのブラウザでボックス シャドウが一貫して表示されるようになります。

以上がブラウザ間でテーブル行のボックス シャドウを一貫して行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。