すべてのブラウザのテーブル行でボックス シャドウが機能しないのはなぜですか?

テーブル行のブラウザ間でのボックス シャドウの不一致が再確認されました

ブラウザ間の互換性を実装する努力にもかかわらず、

この謎めいた問題は、テーブル行でボックス シャドウをレンダリングする際のさまざまなブラウザの固有の癖に起因します。この異常を解決するために、直観に反する解決策が現れます。

シャドウの外観をトリガーするための変換を利用する

単純な変換プロパティ、具体的にはscale(1,1)を導入することにより、 box-shadow と組み合わせると、とらえどころのない影を呼び出すことができます。この手法により、ブラウザ間でシャドウの表示が効果的にトリガーされます。

修正された 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>

このソリューションにより、紛らわしい矛盾が解消され、テーブル行でのボックス シャドウの一貫した表示が保証されます。ブラウザ間で。

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