テーブル行のボックス シャドウがブラウザ間で一貫性のない動作をするのはなぜですか?

ブラウザ間でテーブル行のボックス シャドウが不規則に動作する

CSS ボックス シャドウをテーブル行に適用すると、ブラウザのレンダリングに不整合が発生します。一部のブラウザーでは意図どおりにシャドウが表示されますが、他のブラウザーではシャドウを完全にレンダリングできません。

この問題に対処するには、box-shadow にtransform:scale(1,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>

更新された jsFiddle: https://jsfiddle.net/ampicx /5p91xr48/

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