Question

我在Firefox和Safari中遇到了一些渲染问题。

我的弹性柱盒各占33％，应横向穿过屏幕。他们在IE和Chrome中这样做。在Firefox和Safari中，信息垂直向下显示在一列中。

我需要添加什么才能让它在Firefox和Safari中正确呈现？

Jsfiddle：http://jsfiddle.net/huskydawgs/4rj47uvn/10/

这是HTML：

<div class="container-3col">
<div class="box-3col-1">
                <img alt="Banana" height="173" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYVRpzJ_BgMuSti8xSqtLjWQoQ3Y4unc7fc5XCsh6jMw3kQchLCnBs3oU" width="173" />
    <p>
        The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p></div>
    <div class="box-3col-2">
        <img alt="Apple" height="173" src="http://dreamatico.com/data_images/apple/apple-6.jpg" width="173" />
    <p>
        The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
    </div>
    <div class="box-3col-3">
        <img alt="Orange" height="173" src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="173" />
    <p>
        The orange tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>          
       </div>
</div>

这里是CSS：

.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%;
}

Answer 1

您需要供应商前缀：

.container-3col {
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* old versions of firefox (buggy but mostly works) */
    display: -ms-flexbox;      /* old versions of IE */
    display: -webkit-flex;     /* old versions of chrome and safari */
    display: flex;             /* correct according to spec */
 }

在Firefox和Safari中渲染弹性列框的问题

1 个答案: