テーブル行のボックスシャドウがブラウザ間で一貫性のない動作をするのはなぜですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-31 10:44:01

オリジナル

333 人が閲覧しました

Why Does Box Shadow on Table Rows Behave Inconsistently Across Browsers?

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

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 サイトの他の関連記事を参照してください。