如何规范化 Firefox 和 Safari 中的跨浏览器 Flexbox 错误

Question

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

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

我需要向 CSS 添加什么才能使其在 Firefox 和 Safari 中正确呈现？

这是我的 jsfiddle： 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 .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-boxes 应该在所有当前和主要浏览器中正常工作。

我在您的 CSS 中也找不到任何错误。您使用哪些浏览器版本对其进行了测试？您是否安装了任何可能影响页面内容 and/or 样式的插件？

如何规范化 Firefox 和 Safari 中的跨浏览器 Flexbox 错误

How do I normalize Cross-browser Flexbox Bugs in Firefox and Safari

html

css

flexbox