IE8 - Conteneur avec margin-top: 10px n'a pas de marge

EDIT: Cela n'arrive que dans IE8, il fonctionne très bien dans IE7, Firefox, Opera, etc

Tout d'abord, voici une photo que j'ai faite dans photoshop pour démontrer mon problème: http://richardknop.com/pict.jpg

Maintenant, vous devriez avoir une idée sur mon problème. Voici une version simplifiée de balisage que j'utilise (j'en ai laissé plus de contenu non pertinent):

<div class="left">
    <div class="box">
        //box content
    </div>
    <div class="box">
        //box content
    </div>
    <div class="box">
        //box content
    </div>
</div>
<div class="right">
    <div class="box">
        //box content
    </div>
    <div class="box">
        //box content
    </div>
    <div class="box">
        //box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    //NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    //box content
</div>

Et des styles CSS comme ceci:

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

Évidemment j'ai laissé de côté tous irreevant styles comme les frontières, les couleurs de fond et des images, taille de la police, etc. J'ai gardé seulement des choses importantes.

Une idée d'où pourrait être le problème?

Avez-vous un DOCTYPE ensemble (par exemple, êtes-vous en cours d'exécution dans IE8 normes de la mode? ou bizarreries?)
Oui, j'ai: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Je n'ai pas regardé votre problème en détail, mais de me demander si elle peut être provoquée par l'effondrement des marges par exemple andybudd.com/archives/2003/11/no_margin_for_error

OriginalL'auteur Richard Knop | 2009-08-07

  1. 9

    Voir si padding-top: 10px œuvres. Il se pourrait que la marge est d'essayer d'aller dans le haut de la page.

    Je ne peux pas utiliser padding-top: 10px; parce que les boîtes ont déjà la couleur d'arrière-plan et qu'ils ont déjà padding: 10px donc le contenu à l'intérieur d'eux a l'air mieux.
    Essayez d'ajouter un remplissage comme &nbsp; le clair div. Je me souviens il y avait un bug dans une version antérieure qui avait besoin de contenu de ce type.
    Ajout &nbsp; a résolu le problème 🙂 j'ai juste eu à également ajouter de la hauteur: 0; vers la .à la classe.
    .clear { clear: both; overflow: hidden; }
    vous devriez poster cela comme une réponse. C'est la vraie solution en plus de la hauteur:0; overflow:hidden;. +1

    OriginalL'auteur Justin

  2. 6

    Je pense que c'est une IE8 bug. Se rapporte à un élément frère d'une flottait à gauche et à droite de la div. Avec ou sans compensation de la div, la finale unfloated élément perd sa marge supérieure dans IE8.

    Nous avons testé, et seulement IE8 est faux:

    http://www.inventpartners.com/content/ie8_margin_top_bug

    Nous avons également venu avec 3 solutions.

    Bonne enquête. Le sujet délicat est effondré marges de compensation à l'intérieur. Tous les 3 en haut marges de pas flottant divs sont effondrés dans votre exemple, si la marge supérieure de la troisième n'est pas perdu, il s'est effondré avec la première. W/o clair de la propriété, IE8 comportement est certainement correct, et les autres navigateurs d'accord. Ce que l'ajout de propriété clairs devraient faire n'est pas aussi claire. Découvrez l'Opéra de comportement. BTW, vous n'avez pas besoin de deux flotteurs pour votre démonstration.
    Intéressant. Je n'avais pas pensé à ça. IE8 est à l'évidence beaucoup plus strict sur la marge de l'effondrement de gecko est. J'ai déjà écrit sur un autre marge effondrement problème avec display: table de gecko qui est rendu mieux (différemment) dans IE8 je soupçonne qu'il y aura un peu plus de marge de ces effondrement des incohérences qui sera le déclenchement du code HTML de développeurs dans les mois à venir!
    Salut buti-oxa - j'ai ajouté une note de bas de page de mon article détaillant votre analyse de ce problème. J'espère que c'est ok. Laissez-moi savoir si vous voulez me faire changer.
    Semble bon. Vous êtes certainement raison sur MC continue à être un pain PITA à l'avenir.

    OriginalL'auteur

  3. 1

    Essayez de fermer votre clair div.

    <div class="clear"></div>
    C'est un problème, mais pas la question. L'ajout de la clear classe à la boîte div aura encore quelque chose avant.
    J'ai juste oublié de fermer ici, il est fermé dans le code source. J'ai édité mon post.

    OriginalL'auteur idrumgood

  4. 1

    Je n'ai pas tout à fait obtenir cette approche. Vous pouvez rassembler le <div>s avec la classe à droite et à gauche dans un autre <div> et appliquer overflow: hidden, width: 100% de sorte que les éléments ci-dessous flottait éléments seront affichées correctement.

    Oui mais je préfère avoir un minimum de balisage et de l'utilisation que les divs qui sont absolument nécessaires. Ce serait juste ajouter un autre élément avec pas de sens sémantique qui n'est même pas nécessaire pour le style.
    Je dirais que <div class="clear">&nbsp;</div> est exactement la même. Et, personnellement, je choisirais le débordement de la solution, puisque le HTML a l'air mieux. Mais c'est moi.

    OriginalL'auteur dalizard

  5. 1

    enter code hereEssayez d'utiliser un récipient avec une largeur avec overflow:hidden autour de la flottait divs, et de supprimer le effacé div.

        <div id="container">
        <div class="left">    
            <div class="box">        //box content    </div>    
            <div class="box">        //box content    </div>    
            <div class="box">        //box content    </div>
        </div>
        <div class="right">    
            <div class="box">        //box content right    </div>    
            <div class="box">        //box content    </div>    
            <div class="box">        //box content    </div>
        </div>
    </div>
    <div class="box">    //   //NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    //box content</div>

    Et le CSS

    #container { width: 100%; overflow: hidden; }

    (désolé, j'ai laissé IE7 sur ma machine de travail pour le test donc je ne peux pas vérifier)

    et d'ajouter overflow: hidden et ça marche 🙂
    droit, m'a juste pris dans le processus de le faire!

    OriginalL'auteur ScottE

  6. 1

    J'ai des problèmes similaires, et les solutions fournies par Matt Bradley n'a pas fonctionné pour moi (mais merci pour l'affichage de toute façon!). Je voulais avoir margin-top:10px sur un élément h1.

    La solution je suis venu avec était par l'ajout de position:relative , top:10px et margin-top:0px à l'élément h1.

    OriginalL'auteur bluesun

  7. 0

    Je n'ai pas IE8 avec moi... mais avez-vous essayez d'ajouter clair: les deux vers le bas de la div et l'ajout d'une marge inférieure à l'un des meilleurs chars? Je suis assez sûr que permettrait d'obtenir le même effet sans supplément divs.

    OriginalL'auteur kmiyashiro