Chrome瀏覽器在使用Flexie時不能正確顯示div，（IE可以正常工作）

Question

我試圖將3個div並排排列，剩下的div被推到下一行。後續jsFiddle在IE中完美工作，但在Chrome中它只顯示父div（box-wrap）。 See demo here.

但是，如果我刪除「float：left;」從＃box-wrap-inner div中，div將出現，但第四個div在父級之外（最右邊）。它應該顯示在div 1下面。See demo 2 here.

但是在IE中，第4個div正確地位於div 1的下面，如下面的屏幕截圖所示。當「float：left;」時，導致Chrome無法正確顯示div的原因是什麼？被添加？

主要的HTML代碼：

<div id="box-wrap"> 
      <div id="box-wrap-inner"> 
       <div id="box-1">Box 1</div> 
       <div id="box-2">Box 2</div> 
       <div id="box-3">Box 4</div> 
       <div id="box-3">Box 3</div> 
      </div> 
</div> 

而這導致問題的CSS是：

#box-wrap-inner div { 
    float:left; 
    margin: 10px; 
    width: 32%; 
    height: 200px; 
    background: #f8f8f8; 
    border: 1px solid #8ec1da; 
    text-align: center; 
    line-height: 50px; 
} 

任何幫助將是如此之大！謝謝

在IE

Answer 1

正常工作，這是因爲你使用：

#box-wrap-inner { 
    /* Display Box */ 
    display: -moz-box; 
    display: -webkit-box; 
    display: -ms-box; 
    display: box; 
} 

只是刪除上述display: -webkit-box;，它是在鉻工作：

檢查JSFiddle這裏。