Pourquoi Firefox et Edge gèrent-ils différemment le pourcentage de remplissage et les marges sur les éléments flexibles ?

Dévoilement du mystère du pourcentage de remplissage et des marges dans Firefox et Edge

Dans le domaine des éléments flexibles, la saga du pourcentage de remplissage et des marges a déconcerté les développeurs utilisant Firefox et Edge. Même si Chrome fonctionne bien, ces navigateurs présentent un comportement particulier qui nous laisse perplexes.

Selon la spécification flexbox, les éléments flexibles peuvent être un peu imprévisibles en ce qui concerne les pourcentages de leur remplissage ou de leurs marges. Voici la racine du problème :

Mécanismes de résolution de marges/padding multiples :

La spécification flexbox permet deux interprétations possibles lors du calcul des pourcentages dans ces dimensions :

1. Résolution basée sur les axes : Les pourcentages sont calculés par rapport au l'axe de l'élément (par exemple, gauche/droite pour la largeur, haut/bas pour la hauteur).
2. Résolution de l'axe en ligne : Tous les pourcentages sont calculés par rapport à l'axe en ligne de l'élément (c'est-à-dire le width).

Firefox et Edge ont adopté des approches différentes, conduisant à des incohérences dans leur comportement. Cette variation provient du choix du mécanisme de résolution par les navigateurs, ce qui donne ce qui suit :

Interprétation de Firefox :

• Les pourcentages de remplissage et de marges sont résolus par rapport au axe en ligne, qui correspond toujours à la largeur en écriture horizontale et verticale modes.

Interprétation d'Edge :

• Firefox n'a pas encore été mis à jour vers la spécification flexbox la plus récente et suit donc l'ancien comportement.

Solution :

À assurez un comportement cohérent dans tous les navigateurs, évitez complètement d'utiliser le pourcentage de remplissage et les marges sur les éléments flexibles. En suivant ce conseil crucial, vous pouvez éviter les incohérences entre navigateurs qui pourraient autrement nuire à votre code.

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!