Bagaimana untuk Memastikan Bayang Kotak Konsisten pada Baris Meja Merentasi Pelayar?

Mengoptimumkan Konsistensi Bayangan Kotak pada Baris Jadual Merentasi Penyemak Imbas

Apabila menggunakan bayangan kotak pada baris jadual menggunakan CSS, anda mungkin menghadapi gelagat yang tidak konsisten merentas penyemak imbas yang berbeza. Sesetengah penyemak imbas memaparkan bayang-bayang seperti yang dijangkakan, manakala yang lain tidak.

Memahami Isu

Masalah timbul apabila penyemak imbas memaparkan jadual menggunakan pecutan perkakasan, yang kadangkala boleh mengganggu pemaparan the box-shadow.

Pembetulan Menggunakan Transform Property

Untuk menangani isu ini, penyelesaiannya melibatkan penggunaan transform properties bersama-box-shadow. Dengan menetapkan sifat ubah kepada skala(1), anda memaksa penyemak imbas untuk memaparkan elemen tanpa pecutan perkakasan, membolehkan bayangan kotak dipaparkan dengan betul.

Berikut ialah kod CSS yang melaksanakan pembetulan:

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

Dengan menambahkan kod ini pada CSS anda, anda boleh memastikan bahawa bayangan kotak dipaparkan secara konsisten pada semua penyemak imbas yang menyokong pecutan perkakasan.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Bayang Kotak Konsisten pada Baris Meja Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!