Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Bayangan Kotak pada Baris Meja Berkelakuan Tidak Konsisten Merentasi Pelayar?

Mengapa Bayangan Kotak pada Baris Meja Berkelakuan Tidak Konsisten Merentasi Pelayar?

Patricia Arquette
Patricia Arquetteasal
2024-10-31 10:44:01258semak imbas

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

Bayang Kotak pada Baris Meja Bertindak Merentas Penyemak Imbas

Menggunakan bayang-bayang kotak CSS pada baris jadual menimbulkan ketidakkonsistenan dalam pemaparan penyemak imbas. Walaupun sesetengah penyemak imbas memaparkan bayang-bayang seperti yang dimaksudkan, yang lain gagal untuk memaparkannya sepenuhnya.

Untuk menangani isu ini, menambah sifat transformasi: skala(1,1) dengan bayangan kotak menyelesaikan masalah. Ini memastikan pemaparan bayangan yang konsisten merentas pelayar.

CSS yang dikemas kini:

<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 yang dikemas kini: https://jsfiddle.net/ampicx /5p91xr48/

Atas ialah kandungan terperinci Mengapa Bayangan Kotak pada Baris Meja Berkelakuan Tidak Konsisten Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn