Pourquoi Chrome et Firefox affichent-ils différemment les hauteurs des éléments de bloc ?

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

Lorsque vous définissez la hauteur d'un élément de niveau bloc sur auto ou 0~100 % sans spécifier explicitement la propriété de hauteur du parent, sa hauteur calculée dans Chrome peut différer de celle de Firefox, en particulier lorsque l'élément a une marge inférieure.

Pourquoi le Différence ?

La spécification W3C CSS2.1 stipule que height: 1% doit être calculé automatiquement si la hauteur du bloc conteneur n'est pas spécifiée explicitement. Cependant, Chrome adhère à une interprétation plus traditionnelle, exigeant une propriété de hauteur définie sur le parent pour que les hauteurs en pourcentage fonctionnent sur les éléments enfants.

Firefox et IE, en revanche, ont récemment élargi leur interprétation pour accepter flex hauteurs comme référence pour les hauteurs en pourcentage. Cet écart par rapport à l'interprétation traditionnelle a conduit à des différences de rendu dans les navigateurs.

Solutions alternatives

Pour obtenir le comportement souhaité dans Chrome et Firefox, envisagez ces alternatives :

• Appliquer display: flex au parent, qui définit align-items: stretch et force l'enfant à s'étendre sur toute la hauteur du parent.
• Utiliser position : relative sur le parent et position : absolue ; hauteur : 100 % ; largeur : 100% sur l'enfant. Cette méthode remplace le problème de hauteur de pourcentage dans Chrome.

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!