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

【问题标题】：Chrome not displaying divs properly when using Flexie, (IE works fine)使用 Flexie 时 Chrome 无法正确显示 div，（IE 工作正常）
【发布时间】：2015-04-09 19:04:35
【问题描述】：

我正在尝试并排放置 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 中正常工作

【问题讨论】：

标签： jquery html css google-chrome flexbox

【解决方案1】：

因为你使用：

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

只需删除上面的display: -webkit-box;，它就可以在 chrome 中工作：

在这里查看JSFiddle。

【讨论】：