"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Pourquoi l'ombre de la boîte sur les lignes du tableau se comporte-t-elle différemment selon les navigateurs ?

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

Publié le 2024-11-03
Parcourir:997

Why Does Box Shadow on Table Rows Behave Differently in Different Browsers?

Apparition incohérente de l'ombre 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 un comportement incohérent sur différents navigateurs. Malgré un CSS identique, certains navigateurs peuvent afficher l'ombre comme prévu, tandis que d'autres peuvent ne pas le faire.

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.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3