Pourquoi Chrome et Firefox diffèrent-ils dans le calcul des hauteurs pour les éléments de niveau bloc avec des hauteurs en pourcentage ?

Différences de rendu dans Chrome et Firefox pour les hauteurs

Problème

Définition de la hauteur d'un élément au niveau du bloc sur "auto" ou "0~100 % " sans spécifier explicitement la taille du parent, cela entraîne des calculs de hauteur différents dans Chrome et Firefox. Dans le cas de « hauteur : 1 % », Chrome calcule la hauteur comme la marge inférieure plus la hauteur du contenu, contrairement à Firefox. Ce comportement diffère malgré la spécification CSS indiquant que « hauteur : 1 % » doit être calculée comme « auto » lorsque la taille du parent n'est pas explicitement définie.

Cause

Alors que le W3C fournit des normes pour navigateurs, les fabricants de navigateurs ont la liberté d’implémenter ces normes différemment. Dans ce cas, Chrome et Firefox interprètent différemment la propriété "hauteur".

Chrome suit une interprétation plus traditionnelle de la spécification, exigeant une hauteur définie sur le parent pour que les hauteurs en pourcentage fonctionnent sur les éléments enfants. Firefox et IE ont plus récemment élargi leur interprétation pour accepter également les hauteurs de flexion.

Solutions alternatives

Pour résoudre cette incohérence, envisagez d'utiliser l'une de ces alternatives :

• Display Flex : Définissez "display: flex" sur le parent, qui définit automatiquement "align-items: stretch" et agrandit l'enfant jusqu'à toute la hauteur du parent.
• Positionnement absolu : Définissez "position : relative" sur le parent et "position : absolue ; hauteur : 100 % ; largeur : 100 %" sur l'enfant. Cela permet d'utiliser un pourcentage de hauteur sans hauteur spécifiée sur le parent.

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!