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

Patricia Arquette
Lepaskan: 2024-10-31 10:44:01
asal
310 orang telah melayarinya

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan