Ошибка CSS в Google Chrome

У меня возникла странная проблема в последней версии Chrome (25.0.1364.97 м). У меня есть набор div внутри плавающего, очищенного контейнера, все плавающие влево с одинаковой шириной.

В Firefox, IE и более ранних версиях Chrome все поля сидят бок о бок, как и предполагалось, но в последней версии Chrome первый div выше остальных, например:

enter image description here

Это происходит только тогда, когда окно максимизируется и при первом загрузке, если я обновляю страницу, она сама сортируется, но если я делаю жесткое обновление с помощью Ctrl + F5, это происходит снова.

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}

Я сделал здесь скрипку: http://jsfiddle.net/GZHWR/3/

Является ли это ошибкой в ​​последнем Chrome?

EDIT: Я знаю, что это можно решить, применив дополнение к элементу #wrapper вместо margin-top, но мы обойдем около 140 сайтов, поэтому нецелесообразно идти и изменять CSS на каждом

ИЗМЕНИТЬ 2: Я думаю, мне нужно уточнить мой вопрос. Я не спрашиваю, как исправить проблему.. Я уже знаю, что. Я хочу знать, почему это поведение происходит? Почему механизм рендеринга делает разметку /css таким образом? Это правильное поведение?

Ответы

Ответ 1

Кажется, это ошибка. Проблема возникает при применении clear в элементе обертки. Когда вы удаляете clear, ошибка исчезает.

В соответствии с спецификациями W3C относительно свойства clear:

Это свойство указывает, какие стороны блока (ов) элемента не могут быть рядом с более ранним плавающим полем. Свойство "clear" не рассмотреть float внутри самого элемента или в другом форматировании блока контексты.

Таким образом, это не должно влиять на поведение детей. Я опубликовал отчет об ошибке в Chrome об этой проблеме.

Обновление: по ссылке в комментариях, kjtocool, упомянутой на 30-03-2013:

Похоже, что эта проблема была исправлена ​​в версии 26.0.1410.43

Ответ 2

Почему бы вам не использовать

display: inline-block;

вместо float: left для .box?

Ответ 3

Попробуйте:

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

У меня была такая же проблема с панелью "Как", и после этого кода она работает.

Ответ 5

Попробуйте следующее:

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>

Удалите

clear:both;

из #wrapper

Ответ 6

Удалить ясно: как из #wrapper, так и если вы все еще сталкиваетесь с проблемой, примените clear: оба после последнего div

Ответ 7

Удалить clear: both; float: left; форма #wrapper

clear: оба требуют, когда вы хотите, чтобы необработанный div nex.