tag - Error flotante CSS en Google Chrome

javascript title

Question

Estoy experimentando un problema extraño en la última versión de Chrome (25.0.1364.97 m). Tengo un conjunto de divs dentro de un contenedor flotado y despejado, todos flotados a la izquierda con el mismo ancho.

En Firefox, IE y versiones anteriores de Chrome, todas las cajas se encuentran una al lado de la otra, pero en la última versión de Chrome, el primer div está por encima de los demás.

Parece que solo ocurre cuando la ventana está maximizada y en la primera carga, si actualizo la página, ésta se soluciona, pero si hago una actualización completa con Ctrl + F5, vuelve a suceder.

El 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}

He hecho un violín aquí: http://jsfiddle.net/GZHWR/3/

¿Es este un error en el último Chrome?

EDITAR: Sé que esto se puede resolver aplicando el relleno al elemento #wrapper en lugar de margin-top pero administramos alrededor de 140 sitios, por lo que no es práctico cambiar el CSS en cada uno

EDIT 2: Creo que necesito aclarar mi pregunta. No estoy preguntando cómo solucionar el problema . Eso ya lo se. Quiero saber por qué este comportamiento está ocurriendo? ¿Por qué el motor de renderizado procesa el markup / css de esta manera? ¿Es correcto el comportamiento?

Answer 1

Eliminar claro: ambos; flotar: izquierda; forma #wrapper

claro: ambos se requieren cuando quieres div nex raw.

Answer 2

Elimine el borrado: tanto desde #wrapper como si todavía tiene un problema, borre: ambos después del último div

Answer 3

Parece ser un error. El problema aparece al aplicar clear en el elemento de envoltura. Cuando quitas el clear , el error desaparece.

De acuerdo con las especificaciones de W3C con respecto a la propiedad clear :

Esta propiedad indica qué lados de los cuadros de un elemento pueden no estar adyacentes a un cuadro flotante anterior. La propiedad ''clear'' no considera flotantes dentro del elemento en sí o en otros contextos de formato de bloque.

Así que no debería afectar el comportamiento flotante de los niños. Presenté un informe de error en Chrome sobre este problema.

Actualización: Desde el enlace en los comentarios, kjtocool mencionado el 30-03-2013:

Parece que este problema se ha corregido en la versión 26.0.1410.43

Answer 4

Porque no usas

display: inline-block;

en lugar de float: left para .box?

Answer 5

Prueba esto:

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>

retirar

clear:both;

de #wrapper

Answer 6

Tratar :

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

Tuve el mismo problema con la barra de herramientas "Me gusta" y después de este código, funcionó.

Answer 7

eliminar clear:both desde #wrapper sí funciona ..........

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