Google Chrome中的CSS浮动Bug

Question

我在最新版本的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中的错误吗？

编辑:我知道这可以通过将填充应用于#wrapper元素而不是margin-top来解决,但是我们管理了大约140个站点​​,因此在每个站点上更改CSS是不实际的

编辑2:我想我需要澄清我的问题.我不是问如何解决这个问题.我已经知道了.我想知道为什么会出现这种情况？为什么渲染引擎会像这样呈现标记/ css？这是正确的行为吗？

Answer 1

这似乎是一个错误.clear在包装元素上应用时会出现问题.删除后clear,bug就会消失.

根据有关该物业的W3C规范clear:

此属性指示元素框的哪些边可能不与较早的浮动框相邻.'clear'属性不考虑元素本身或其他块格式化上下文中的浮点数.

所以它不应该影响孩子的浮动行为.我在Chrome上提交了一个关于此问题的错误报告.

更新:从评论中的链接,kjtocool在30-03-2013提到:

该问题似乎已在版本26.0.1410.43中得到纠正

Answer 2

你为什么不用

display: inline-block;

而不是float: left.box？