Raisons et solutions pour l'échec de la marge supérieure de Firefox

Pourquoi devrions-nous traduire cette description ? Quelqu'un a traduit le CSS2, mais après l'avoir regardé, c'est très approximatif (je ne dis pas que je suis le seul, le traducteur est vraiment admirable ! Ces derniers temps, je suis de plus en plus en contact avec le CSS et le CSS2). xhtml, mais plus il y en a, plus il y a de confusion.
Maintenant, je pense que de nombreux problèmes ne peuvent pas du tout être qualifiés de problèmes. La raison réside dans notre compréhension hâtive. Par exemple, tuer un poulet avec un couteau de taureau n'est pas impossible, mais déraisonnable et inapproprié. l'apparence sera fausse. , si vous commencez à résoudre le problème à partir de l'apparence, il est inévitable que vous soyez toujours confus. Comme je l'ai dit, vous devez être terre-à-terre et ne pas être impétueux.
Dans cette description, « marges réduites » signifie : attributs de marge adjacents entre 2 modèles de boîte ou plus (la relation peut être adjacente ou imbriquée) (il ne peut pas y avoir de contenu non vide, de zone de remplissage, de bordure ou d'utilisation d'une méthode de séparation claire) sont combinés et représentés comme une marge unique.
Dans CSS2.1, les marges horizontales ne seront pas réduites.
Les marges verticales peuvent être réduites dans certains modèles de boîtes :
1. Dans le flux de documents normal, les marges verticales adjacentes de 2 modèles de boîtes ou plus au niveau du bloc seront réduites.
La méthode de calcul de la valeur de marge finale est la suivante :
a. Si toutes sont des valeurs positives, prenez la plus grande
Si toutes ne sont pas des valeurs positives, prenez la valeur absolue, puis soustrayez la valeur ; valeur maximale de la valeur positive.
c. S'il n'y a pas de valeur positive, prenez la valeur absolue, puis soustrayez la valeur maximale de 0.
Remarque : les modèles de boîtes adjacentes peuvent être générés dynamiquement à partir d'éléments DOM et n'ont aucune relation d'adjacent ou d'héritage.
2. Dans les modèles adjacents et, si l'un d'entre eux est flottant, la marge verticale ne sera pas réduite, même entre un modèle de boîte flottante et ses éléments enfants.
3. La marge entre l'élément avec l'attribut de débordement défini et ses éléments enfants ne sera pas pliée (sauf lorsque la valeur de débordement est visible).
4. Pour les modèles de boîtes avec un positionnement absolu (position:absolute), les marges verticales ne seront pas réduites, même entre elles et leurs éléments enfants.
5. Pour les éléments avec display:inline-block défini, la marge verticale ne sera pas réduite, même entre leurs éléments enfants.
6. Si les marges supérieure et inférieure d'un modèle de boîte sont adjacentes, sa marge peut s'effondrer à travers elle. Dans ce cas, la position de l'élément dépend du fait que les marges de ses éléments adjacents sont réduites ou non.
a. Si la marge d'un élément et la marge supérieure de son élément parent sont réduites ensemble, la définition de la bordure supérieure du modèle de boîte est la même que celle de son élément parent.
b. De plus, l'élément parent de tout élément ne participe pas au pliage de la marge, ou seule la marge inférieure de l'élément parent participe au calcul. Si la bordure supérieure de l'élément est différente de zéro, alors la position de la bordure supérieure de l'élément est la même qu'auparavant.
La marge supérieure d'un élément auquel une opération claire est appliquée ne s'effondrera jamais avec la marge inférieure de son élément parent au niveau du bloc.
Notez que la position des éléments qui ont été recouverts par le pli n'a aucun effet sur la position des autres éléments qui ont été réduits ; la position de la bordure supérieure n'est requise que lors de la disposition des enfants de ces éléments.
7. La marge verticale de l'élément racine ne sera pas réduite.
La marge inférieure d'un élément flottant au niveau du bloc est toujours adjacente à la marge supérieure de son prochain frère flottant au niveau du bloc, à moins que cet élément frère ne soit effacé.
La marge supérieure d'un élément flottant au niveau du bloc est adjacente à la marge supérieure de son premier enfant flottant au niveau du bloc (premier enfant flottant au niveau du bloc entrant) (si l'élément n'a pas de bordure supérieure, pas de padding-top et les éléments enfants ne sont pas effacés).
Si la marge inférieure d'un élément flottant au niveau du bloc remplit les conditions suivantes, alors elle est adjacente à la marge inférieure de son dernier élément enfant flottant au niveau du bloc (si l'élément ne spécifie pas padding-bottom ou border ):
a. Height:auto est spécifié
b. la hauteur minimale est inférieure à la hauteur réelle de l'élément (hauteur)
c. height)
Si le min d'un élément -L'attribut height est défini sur 0, alors les marges qu'il possède sont adjacentes, et il n'a ni border-top ni border-bottom, ni padding-top et padding-bottom Its. L'attribut height peut être 0 ou auto. Il ne peut pas contenir de modèle de boîte en ligne (boîte de ligne) et les marges de tous ses éléments enfants flottants (le cas échéant) sont adjacentes.
Lorsque la marge appartenant à un élément est réduite et qu'il utilise l'opération clear, sa marge supérieure sera réduite avec la marge adjacente de l'élément frère immédiatement suivant, mais le résultat est que sa marge ne sera pas cohérente avec sa margin. Réduire la marge inférieure des éléments parents au niveau du bloc.
L'opération de pliage est basée sur les valeurs de remplissage, de marge et de bordure (c'est-à-dire une fois que le navigateur a analysé toutes ces valeurs). Le calcul de la marge pliée écrasera les différentes valeurs de marge qui ont été utilisées.

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示 
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
</div>

Pour plus d'articles liés aux causes et aux solutions de l'échec de la marge supérieure de Firefox, veuillez faire attention au site Web PHP chinois !