Pourquoi la variable flottante hérite parfois de la marge de l'élément suivant?

Plutôt que d'essayer d'expliquer cela, je vais vous donner le code:Pourquoi la variable flottante hérite parfois de la marge de l'élément suivant?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
    <title>weird</title> 
    <style type="text/css"> 
     div#sidebar { 
      background-color: yellow; 
      float: left; 
      width: 200px; 
     } 
    </style> 
</head> 

<body> 
    <!-- insert something here to shift the top 
     of the sidebar by the top margin of the following div 
    --> 
    <div id="sidebar"> 
     background-color: yellow;<br /> 
     float: left; <br />    
     width: 200px;<br /> 
    </div> 

    <div style="margin-top: 200px;">div - margin-top: 200px;</div> 
</body> 
</html>

Je teste cela dans FF et Chrome. Étrangement, IE6 se comporte d'une manière que je pensais correcte. (?) J'ai réduit cela à la reproduction minimale que je peux. Fondamentalement, si vous placez un texte à proximité du commentaire, la barre latérale se déplacera vers le haut du document comme je l'espère. Sinon, la barre latérale semble hériter de la marge supérieure de la div suivante.

Que se passe-t-il?

Source

2009-09-16 recursive

Juste pensé que je noterais que vous fermez votre dernier div avec/h2. En outre, vous devriez fermer vos éléments br depuis que vous utilisez un doctype XHTML Strict. –

Bonnes prises. J'ai résolu ce problème. – recursive

Même avec le titre étant fermé faux. Mais ça ne fait rien. – corymathews

Ce comportement est à mon avis correct. Les éléments de bloc flottant sont dessinés à la même marge supérieure. Ils doivent être au même niveau. Une solution de contournement serait de travailler avec rembourrage ici.

Source

2009-09-16 15:46:32 Mobbit

Cela ne peut pas être correct. Si vous deviez remplacer corymathews

L'étrange chose est que le chrome le fait aussi, ce qui utilise un moteur de rendu complètement différent. – recursive

IE8 le rend le même et FF et Chrome. Je suis à peu près sûr que c'est vrai. – PHLAK

Vous ne savez pas pourquoi un navigateur fonctionnerait de la sorte. Je lui ai donné quelques essais et j'ai trouvé qu'Opera et FF le rendaient mal. Alors que IE7 le rend correctement. Ma connaissance de CSS dirait que la div devrait flotter vers la gauche et la seconde div juste être 200px en-dessous du haut ignorant fondamentalement que la première div existe même.

En ajoutant une vision claire: de gauche à la deuxième div vous donnant

<div style="margin-top: 200px; clear:both;">div with big top margin</div>

Il viderait correctement dans Opera et FF mais maintenant son tort dans IE7. IE7 ajoute de l'espace supplémentaire maintenant. Il l'affiche 200px sous la boîte au lieu d'en haut.

Source

2009-09-16 16:00:09 corymathews

Pourquoi la variable flottante hérite parfois de la marge de l'élément suivant?

Répondre

Questions connexes