谷歌瀏覽器中的CSS浮動錯誤

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/

這是在最新的瀏覽器的錯誤？

編輯：我知道這可以通過應用填充到#wrapper指定元素而不是邊距來解決，但我們管理的約140點，所以它不是實際的去更改CSS在每一個

EDIT 2 ：我想我需要澄清我的問題。 我不是問如何解決問題。我已經知道了。我想知道爲什麼會發生這種行爲？爲什麼渲染引擎會像這樣渲染標記/ css？這是正確的行爲嗎？

Answer 1

這似乎是一個錯誤之後。在包裝元素上應用clear時出現問題。當您刪除clear時，錯誤消失。

按照W3C specs關於clear屬性：

該屬性指示該元素的框（ES）的側面可以不鄰接 到較早的浮箱。 '清除'屬性不認爲 考慮漂浮在元素本身或其他塊格式 上下文中。

所以它不應該影響孩子的浮動行爲。我在Chrome上提交了關於此問題的錯誤報告。

更新：從評論的鏈接，kjtocool上30-03-2013提到：

看來，這個問題已在版本26.0.1410.43

Answer 2

你爲什麼不使用

display: inline-block; 

，而不是float: left爲.box的？

Answer 3

嘗試：

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

我有同樣的問題與「象」工具欄和驗證碼後，它的工作。

Answer 4

刪除clear:both從#wrapper是的它工作..........

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

Answer 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指定

Answer 6

刪除明確的：無論是從#wrapper指定，如果你仍然面臨一個問題適用明確：雙方最後一個div

Answer 7

刪除已更正明確：兩者;浮動：左; form #wrapper

明確：兩者都是需要的，當你想div divx raw。