Pourquoi Chrome et Firefox affichent-ils différemment les hauteurs de pourcentage sur les éléments au niveau du bloc ?

Les hauteurs s'affichent différemment dans Chrome et Firefox

Question :

Lors de la définition de la hauteur d'un élément au niveau du bloc sur un pourcentage (par exemple, 1 %) sans définir explicitement la hauteur de son parent, pourquoi Chrome et Firefox calculent-ils la hauteur différemment, Chrome prenant en compte le la marge inférieure de l'enfant et Firefox non ?

Réponse :

Les normes CSS stipulent que si la hauteur du bloc conteneur n'est pas spécifiée explicitement, un pourcentage de hauteur est calculé comme "auto. "

Cependant, différents navigateurs ont implémenté cette disposition différemment :

• Webkit navigateurs (Chrome, Safari) adhèrent à l'interprétation traditionnelle, exigeant que le parent ait une hauteur définie pour les hauteurs en pourcentage afin de travailler sur les enfants entrants.
• Firefox et IE ont ont élargi leur interprétation pour accepter également les hauteurs de flexion.

Cet écart par rapport aux spécifications a conduit à des incohérences de rendu, certains navigateurs utilisant hauteurs flexibles et autres nécessitant une hauteur parent définie.

Solutions alternatives :

Pour garantir un rendu cohérent dans tous les navigateurs, envisagez d'utiliser l'une des alternatives suivantes :

• Réglez l'écran du parent sur "flex" pour activer automatiquement la pleine hauteur pour les enfants à l'aide des éléments d'alignement : étirer.
• Utilisez la position : absolue et la position : relative sur les éléments parent et enfant, respectivement, l'enfant ayant une hauteur : 100 % ; largeur : 100 %. Cela permet aux pourcentages de hauteur de fonctionner sur les éléments enfants même sans hauteur parent spécifiée.

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!