Bug floating CSS in Google Chrome

Question

Sto riscontrando un problema strano nell'ultima versione di Chrome (25.0.1364.97 m). Ho un set di div all'interno di un contenitore flottato, cancellato, tutto flottato a sinistra con la stessa larghezza.

In Firefox, IE, e le vecchie versioni di Chrome tutte le caselle siedono fianco a fianco, come si suppone, ma nella sua ultima versione di Chrome il primo div è sopra gli altri in questo modo:

sembra accadere solo quando la finestra è massimizzata e il primo carico, se mi aggiorna la pagina che si ordina fuori, ma se faccio un aggiornamento forzato con Ctrl + F5 succede di nuovo

il codice 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} 

Ho fatto un violino qui: http://jsfiddle.net/GZHWR/3/

Si tratta di un bug nel recente Chrome?

EDIT: So che questo può essere risolto applicando padding all'elemento #wrapper invece di margin-top, ma abbiamo gestire circa 140 siti, quindi non è pratico di andare a cambiare il CSS su ogni uno

EDIT 2 : Penso di aver bisogno di chiarire la mia domanda. Non sto chiedendo come risolvere il problema. Lo so già. Voglio sapere perché si sta verificando questo comportamento? Perché il motore di rendering rende il markup/css come questo? È un comportamento corretto?

Answer 1

Sembra essere un bug. Il problema si presenta quando si applica clear sull'elemento wrapper. Quando rimuovi lo clear, il bug scompare.

Secondo la W3C specs riferimento alla struttura clear:

Questa proprietà indica quali lati della scatola di un elemento (i) non possono essere adiacente ad una scatola galleggiante precedente. La proprietà 'clear' non considera float all'interno dell'elemento stesso o in altri contesti di formattazione del blocco .

Quindi non dovrebbe influire sul comportamento fluttuante dei bambini. Ho presentato una segnalazione di bug a Chrome su questo problema.

Aggiornamento: Dal link nei commenti, kjtocool menzionato il 30-03-2013:

Sembra che questo problema è stato corretto nella versione 26.0.1410.43

Answer 2

Perché non si utilizza

display: inline-block; 

invece di float: left per .box?

Answer 3

Prova:

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

Ho avuto lo stesso problema con il "Like" barra degli strumenti e dopo questo codice, funziona.

Answer 4

rimuovere clear:both da #wrapper sì funziona ..........

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

Answer 5

Prova questo:

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> 

Rimuovere

clear:both; 

da #wrapper

Answer 6

Rimuovere chiaro: sia dal #wrapper e se ancora affrontare un problema applicano clear: both dopo l'ultima div

Answer 7

Rimuovere clear: both; float: left; modulo #wrapper

chiaro: entrambi sono necessari quando si desidera div nex raw.