CSS Flottant Bug dans Google Chrome

Je suis en train de vivre une drôle de question dans la dernière version de Chrome (25.0.1364.97 m). J'ai un ensemble de divisions à l'intérieur d'une flotté, effacé conteneur, tout flottait à gauche avec la même largeur.

Dans Firefox, IE, et les anciennes versions de google Chrome, toutes les cases sont assis côte à côte comme ils sont censés mais dans la dernière version de google Chrome, le premier div est au-dessus des autres comme suit:

CSS Flottant Bug dans Google Chrome

Il ne se produit que lorsque la fenêtre est maximisée et sur la première charge, si j'actualise la page, il résout de lui-même, mais si je fais un rafraîchissement avec Ctrl + F5 il se produit de nouveau

Le code HTML:

<div id="top">
    <h1>Words</h1>
</div>
<div id="wrapper">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

CSS:

#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}

J'ai fait du violon ici: http://jsfiddle.net/GZHWR/3/

Est-ce un bug dans le dernier Chrome?

EDIT: je sais que cela peut être résolu par l'application d'un rembourrage pour le #wrapper élément au lieu de margin-top, mais nous gérons environ 140 sites donc c'est pas pratique pour aller et modifier le CSS sur tous

EDIT 2: je pense que j'ai besoin de préciser ma question. Je ne demande pas comment résoudre le problème. Je sais déjà que. Je veux savoir pourquoi ce comportement se produit? Pourquoi le moteur de rendu rendu le balisage/css comme ceci? Est-il exact de comportement?

  • fonctionne pour moi sur le violon
  • Semble parfait sur Chrome 25.0.1364.97.
  • Google Chrome 25.0.1364.97 et tout semble parfait
  • Est la fenêtre maximisée? Essayez un Ctrl + F5 sur elle?
  • J'obtiens le même résultat que l'OP (26.0.1410.12 bêta-m). Retrait de la clear sur le conteneur semble résoudre le problème.
  • Lorsque vous modifiez la taille de la fenêtre dans jsfiddle le bug apparaît.
  • Il affecte également stable de Chrome versions. Je peux voir le bug après le redimensionnement de la fenêtre. Intéressant! +1
  • fonctionne très bien sur chrome 25.0.1364.152 m"
  • Avez-vous des css affectant les balises H1. La balise à l'intérieur de la firsrt .boîte div peut avoir une largeur.
  • Ce bug a été signalé à Google Chrome forum: productforums.google.com/forum/?fromgroups=#!topic/chrome/...

InformationsquelleAutor Andy | 2013-03-01
  1. 13

    Il semble être un bug. Le problème apparaît lors de l'application clear sur l'emballage de l'élément. Lorsque vous retirez le clear, le bug disparait.

    Selon la Spécifications du W3C concernant la clear propriété:

    Cette propriété indique les faces d'un élément de la boîte(es) ne peut pas être
    adjacent à un état antérieur de zone flottante. Le "clair" de la propriété n'
    envisager de flotte à l'intérieur de l'élément lui-même     ou dans un autre bloc de mise en forme
    les contextes.

    Donc il ne devrait pas l'effet de la enfants flottants de comportement. J'ai déposé un rapport de bug sur Chrome sur ce problème.

    Mise à jour: à Partir du lien dans les commentaires, kjtocool mentionné sur le 30-03-2013:

    Il semble que ce problème a été corrigé dans la version 26.0.1410.43

    InformationsquelleAutor Justus Romijn
  2. 6

    Pourquoi n'utilisez-vous pas

    display: inline-block;

    au lieu de float: left pour .boîte?

    • Parce que nous gérons environ 140 sites et j'attends la majorité ont au moins une partie du site de ce genre. Ne va pas modifier chaque site, en raison d'un bogue dans le logiciel
    • le problème n'est pas comment éviter le bug, le problème est le bug lui-même hehe. De toute façon, c'est un temp solution.
    InformationsquelleAutor Sergio
  3. 2

    Essayer :

    #wrapper {
  display:inline;
}
.box{
  vertical-align:top;
}

    J'ai eu le même problème avec le "Comme" de la barre d'outils et d'après ce code, il fonctionne.

    • l'ajout d'vertical-align:top des travaux!!!
    InformationsquelleAutor Francois Borgies
  4. 0

    Essayez ceci:

    css:

       .clearfix {
      *zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      line-height: 0;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    html:

    <div id="wrapper" class="clearfix">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

    Supprimer 

    clear:both;

    de #wrapper

    InformationsquelleAutor Hdude74
  5. 0

    supprimer clear:both de #wrapper oui, il fonctionne..........

    http://jsfiddle.net/GZHWR/20/

    InformationsquelleAutor Rahul Shah
  6. 0

    Supprimer clear:both de #wrapper et si vous avez encore un problème s'appliquent clear:both après la dernière div

    InformationsquelleAutor Nomaan
  7. 0

    Supprimer clear:both;float:left; forme #wrapper

    clair:les deux sont besoin quand vous voulez div nex raw.

    • Je commence à sonner comme un disque rayé maintenant. Merci de lire la deuxième édition de la question
    InformationsquelleAutor dsfg