Mengapa Box Shadow Tidak Berfungsi pada Baris Jadual dalam Semua Penyemak Imbas?

Ketidakkonsistenan Bayangan Kotak Merentas Penyemak Imbas untuk Baris Jadual Dilawati Semula

Walaupun ada usaha untuk melaksanakan keserasian merentas pelayar, bayangan kotak CSS pada

Isu membingungkan ini berpunca daripada ciri-ciri intrinsik penyemak imbas yang berbeza apabila memaparkan bayang-bayang kotak pada baris jadual. Untuk menyelesaikan anomali ini, penyelesaian berlawanan intuitif muncul dengan sendirinya.

Memanfaatkan transformasi untuk Mencetuskan Kemunculan Bayangan

Dengan memperkenalkan sifat transformasi ringkas, khususnya skala(1,1), dan menggabungkannya dengan bayang-bayang kotak, bayang yang sukar difahami boleh dipanggil. Teknik ini dengan berkesan mencetuskan kemunculan bayang-bayang merentas penyemak imbas.

Berikut ialah CSS yang dipinda:

<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>

Penyelesaian ini menghapuskan percanggahan yang membingungkan, memastikan paparan bayang-kotak yang konsisten pada baris jadual merentas pelayar.

Atas ialah kandungan terperinci Mengapa Box Shadow Tidak Berfungsi pada Baris Jadual dalam Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!