在Firefox和Safari中渲染Flex列框的問題

Question

我在Firefox和Safari中遇到了一些渲染問題。

我的Flex列框每個都是33％，並且應該水平穿過屏幕。他們在IE和Chrome中這樣做。在Firefox和Safari中，信息顯示在頁面垂直向下的一列中。

我需要添加到我的CSS以使其在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 */ 
}