使用Flexie时Chrome无法正确显示div，（IE工作正常）

Question

我试图并排3个div，剩下的div被推到下一行。以下jsFiddle在IE中完美运行，但在Chrome中它只显示父div（box-wrap）。 See demo here.

但是，如果我删除＆＃34; float：left;＆＃34;从＃box-wrap-inner div开始，div会出现，但是第4个div在父级之外（最右边）。它应显示在div 1下方。See demo 2 here.

然而，在IE中，第4个div正确定位在div 1下方，如下面的屏幕截图所示。当＆＃34; float：left;＆＃34;导致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;以上，就可以使用chrome：

在这里查看JSFiddle。