谷歌浏览器中的CSS浮动错误

Question

我在最新版本的Chrome（25.0.1364.97 m）中遇到了一个奇怪的问题。我有一组div放在一个浮动、清除的容器内，所有的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}

我已经在这里创建了一个fiddle: http://jsfiddle.net/GZHWR/3/ 这是最新版Chrome的一个bug吗？

编辑：我知道可以通过对#wrapper元素应用padding而不是margin-top来解决此问题，但我们管理着大约140个网站，所以不实际在每个网站上更改CSS。

编辑2：我认为我需要澄清我的问题。 我不是在问如何修复问题。我已经知道了。我想知道为什么会出现这种行为？渲染引擎为什么会呈现类似的标记/ CSS？这是正确的行为吗？

- Andy

---

“works for me on the fiddle” 可以翻译为“对我来说在小提琴上行得通”。 - PaperThick

在Chrome 25.0.1364.97上看起来完美。 - Cthulhu

有Chrome 25.0.1364.97，一切看起来都很好。 - Merec

我得到了跟原帖作者一样的结果（版本号为26.0.1410.12 beta-m）。移除容器上的clear似乎解决了这个问题。 - BenM

它也会影响稳定版的Chrome浏览器。我可以在调整窗口大小后看到这个bug。有趣！+1 - Salvatorelab

Answer 1

看起来是一个bug。当在包装元素上应用clear时，问题出现了。当你删除clear时，这个bug就会消失。

根据关于clear属性的W3C规范：

此属性指示该元素框的哪些侧面可能不与早期浮动框相邻。 'clear'属性不考虑元素本身内部的浮动或其他块级格式化上下文中的浮动。

因此，它不应影响子元素的浮动行为。我在Chrome关于这个问题提交了一个bug报告。

更新：从评论中的链接，kjtocool在2013年03月30日提到：

看起来这个问题已经在26.0.1410.43版本中得到了修正

- Justus Romijn

---

是的，这是Google Chrome浏览器中的新漏洞。请参见https://productforums.google.com/forum/?fromgroups=#!topic/chrome/94s52C4mmgo和http://journalxtra.com/websiteadvice/google-chrome-css-rendering-bug-in-version-25-0-1364-97-5355/。 - dkamins

看起来这个 bug 又在版本 59.0.3071.115 中出现了。 - Bruffstar

Answer 2

为什么不使用

display: inline-block;

对于 .box，使用 float: left 的代替方案是什么？

- Sergio

---

因为我们管理着大约140个网站，我预计大多数网站至少有一个类似这样的部分。不会因为软件中的一个错误而编辑每个网站。 - Andy

问题不在于如何避免错误，而在于错误本身。呵呵，无论如何，这只是一个临时解决方案。 - Salvatorelab

Answer 3

尝试：

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

我遇到了“赞”工具栏的相同问题，但在使用这段代码后，它开始正常工作。

- Francois Borgies

Answer 4

从#wrapper中移除clear:both，是的，它可以正常工作……

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

- Rahul Shah

Answer 5

从#wrapper中删除clear:both，如果你仍然遇到问题，在最后一个div后应用clear:both。

- Nomaan

Answer 6

从#wrapper中移除clear:both;float:left;

当您想要div换行时，需要使用clear:both。

- dsfg

---

我现在开始听起来像是一个坏掉的唱片了。请阅读问题的第二次编辑。 - Andy

Answer 7

试试这个：

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

- Hdude74