如何规范Firefox和Safari中的跨浏览器Flexbox Bug

Question

我在Firefox和Safari中遇到了flexbox兼容性问题。

我的弹性列框各占33%，应该在屏幕上水平排列。他们在IE和Chrome中这样做。在Firefox和Safari中，信息显示在页面垂直下方的一列中。

我需要在CSS中添加什么才能在Firefox和Safari中正确渲染？

这是我的小提琴：https://jsfiddle.net/huskydawgs/uy1wn9tu/4/

这是我的HTML:

    <div class="container-3col">
    <div class="box-3col-1">
        <a href="http://www.apple.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_sizing_up_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.apple.com">Sizing up the $1.5 Trillion State & Local Contracting Market</a></strong></p>
        <p><a href="http://www.apple.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
    <div class="box-3col-2">
        <a href="http://www.ibm.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_myths_about_competing_in_sled_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.ibm.com">5 Myths About Competing in the State, Local and Education Government Market</a></strong></p>
        <p><a href="http://www.ibm.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
    <div class="box-3col-3">
        <a href="http://www.microsoft.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_things_vendors_sled_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.microsoft.com">5 Things Vendors Who Are Entering the SLED Market Need to Know</a></strong></p>
        <p><a href="http://www.microsoft.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
</div>

这是我的CSS：

/* 3 Column Div */
.container-3col {
    display: flex;
    justify-content: center;
}
.container-3col > div {
    margin: 10px;
    padding: 10px;
    text-align: center;
}
.box-3col-1 {
    width: 33.33333%;
}
.box-3col-2 {
    width: 33.33333%;
}
.box-3col-3 {
    width: 33.33333%;
}
.subcompact { margin: 0 0 10px 0; }

Answer 1

无法复制。在Firefox 42（Windows 7 x64）上，框为我显示为一行。

根据caniuse.com的说法，flex box应该在所有当前和主要的浏览器中都能正常工作。

我在你的CSS中也找不到任何错误。你用什么浏览器版本测试它？您是否安装了可能影响页面内容和/或样式的插件？