У меня возникла странная проблема в последней версии Chrome (25.0.1364.97 м). У меня есть набор div внутри плавающего, очищенного контейнера, все плавающие влево с одинаковой шириной.
В Firefox, IE и более ранних версиях Chrome все поля сидят бок о бок, как и предполагалось, но в последней версии Chrome первый div выше остальных, например:
Это происходит только тогда, когда окно максимизируется и при первом загрузке, если я обновляю страницу, она сама сортируется, но если я делаю жесткое обновление с помощью 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 таким образом? Это правильное поведение?