Pourquoi l'ombre de la boîte sur les lignes du tableau se comporte-t-elle différemment selon les navigateurs ?

Apparition incohérente des ombres de boîte sur les lignes du tableau dans les navigateurs

L'ombre de la boîte CSS appliquée aux lignes du tableau () peut présenter des comportement dans différents navigateurs. Malgré un CSS identique, certains navigateurs peuvent afficher l'ombre comme prévu, tandis que d'autres ne le peuvent pas.

Pour résoudre ce problème, il est recommandé d'utiliser la propriété transform en conjonction avec l'attribut box-shadow. L'ajout de scale(1,1) à la propriété transform oblige le navigateur à restituer l'élément, garantissant que l'effet d'ombre de boîte est appliqué uniformément.

Voici le code CSS mis à jour :

tr:hover {
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,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);
}

En ajoutant cet extrait de code, l'ombre de la boîte apparaîtra désormais de manière cohérente dans tous les navigateurs pris en charge.

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!