Pourquoi Box Shadow ne fonctionne-t-il pas sur les lignes du tableau dans tous les navigateurs ?

Incohérences de l'ombre de boîte dans les navigateurs pour les lignes de tableau revisitées

Malgré les efforts pour implémenter la compatibilité entre navigateurs, CSS box-shadow sur

Ce problème énigmatique provient des bizarreries intrinsèques de différents navigateurs lors du rendu de l'ombre de la boîte sur les lignes du tableau. Pour résoudre cette anomalie, une solution contre-intuitive se présente.

Exploiter la transformation pour déclencher l'apparence des ombres

En introduisant une propriété de transformation simple, spécifiquement scale(1,1), et en le couplant avec l'ombre-boîte, l'ombre insaisissable peut être invoquée. Cette technique déclenche efficacement l'apparition de l'ombre dans les navigateurs.

Voici le CSS modifié :

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

Cette solution élimine les divergences déroutantes, garantissant un affichage cohérent de l'ombre de la boîte sur les lignes du tableau. sur tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!