jquery - Chrome 在使用 Flexie 时无法正确显示 div，(IE 工作正常)

Question

我试图并排放置 3 个 div，将所有剩余的 div 推到下一行。下面的 jsFiddle 在 IE 中完美运行，但在 Chrome 中它只显示父 div (box-wrap)。 See demo here.

但是，如果我删除“float:left;”从#box-wrap-inner div 开始，div 将出现，但第 4 个 div 在父级之外(最右边)。它应该显示在 div 1 下面。 See demo 2 here.

然而，在 IE 中，第 4 个 div 正确定位在 div 1 下方，如您在下面的屏幕截图中所见。是什么导致 Chrome 在“float:left;”时无法正确显示 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在这里。