web-dev-qa-db-fra.com

Bug flottant CSS dans Google Chrome

Je rencontre un problème étrange dans la dernière version de Chrome (25.0.1364.97 m). J'ai un ensemble de div à l'intérieur d'un conteneur flottant et nettoyé, tous flottaient à gauche avec la même largeur.

Dans Firefox, IE et les anciennes versions de Chrome toutes les cases sont côte à côte comme elles sont supposées mais dans la dernière version de Chrome la première div est au dessus des autres comme ça:

enter image description here

Cela ne semble se produire que lorsque la fenêtre est agrandie et au premier chargement, si je rafraîchis la page, elle se trie, mais si je fais un rafraîchissement dur avec Ctrl + F5, cela se produit à nouveau

Le 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 un violon ici: http://jsfiddle.net/GZHWR/3/

Est-ce un bug dans le dernier Chrome?

EDIT: Je sais que cela peut être résolu en appliquant un remplissage à l'élément #wrapper au lieu de margin-top, mais nous gérons environ 140 sites, il n'est donc pas pratique d'aller changer le CSS sur chacun

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

cssgoogle-chromecss-float
29
Andy

Cela semble être un bug. Le problème apparaît lors de l'application de clear sur l'élément wrapper. Lorsque vous supprimez le clear, le bogue disparaît.

Selon les spécifications W3C concernant la propriété clear:

Cette propriété indique quels côtés de la ou des boîtes d'un élément peuvent ne pas être adjacents à une boîte flottante antérieure. La propriété 'clear' ne prend pas en compte les flottants à l'intérieur de l'élément lui-même ou dans d'autres contextes de mise en forme de bloc.

Cela ne devrait donc pas affecter le comportement flottant des enfants. J'ai déposé un rapport de bogue à Chrome à propos de ce problème.

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

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

13
Justus Romijn

Pourquoi n'utilisez-vous pas

display: inline-block;

au lieu de float: left pour .box?

6
Sergio

Essayez:

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

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

2
Francois Borgies

Supprimer clear: les deux de #wrapper et si vous rencontrez toujours un problème, appliquez clear: both after last div

0
Nomaan

Supprimer clair: les deux; flotteur: gauche; form #wrapper

clair: les deux sont requis lorsque vous voulez div nex raw.

0
dsfg

Essaye ça:

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>

Retirer

clear:both;

de #wrapper

0
Hdude74

retirer clear:both de #wrapper Oui cela fonctionne..........

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

0
Rahul Shah