CSS3 FlexBox在Firefox中無法正確顯示22

由於某種原因，我在Firefox 22中工作的項目無法正確顯示。在webkit瀏覽器中正常工作（在Opera 15和Chrome 27中測試; Safari將不支持更新的規範直到7.0）。所有東西都按行組合在一起，所以我的第一個想法是將彈性方向更改爲列而不是行，但這甚至沒有幫助。CSS3 FlexBox在Firefox中無法正確顯示22

* { 
margin:0; 
padding:0; 
} 
body { 
    background: none repeat scroll 0% 0% #ECF1E1; 
    color: #FFFFFF; 
    font-size: 100%; 
    height: 100%; 
    display: flex; 
    display: -webkit-flex; 
    width:100%; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    overflow-x:hidden; 
} 
#content { 
    background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0); /* IE6-9 */ 
    border-radius: 5px 5px 5px 5px; 
    border: 5px outset #FF6600; 
    margin: 0% .25%; 
    -webkit-flex:2; 
    flex: 2; 
    padding:0% 1.3%; 
} 
#login { 
    background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0); /* IE6-9 */ 
    border-radius: 5px; 
    border: 5px outset #FF6600; 
    flex:1;  
    -webkit-flex:1; 
    padding:10px; 
    margin: 0% .25%; 
} 
footer#footer { 
    background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0); /* IE6-9 */ 
    border-top: 5px outset #FF6600; 
    height: 50px; 
    padding: 0% 1%; 
    text-align:center; 
    clear:both; 
    width:100%; 
    margin: 2% 0% 0% 0%; 
}

它應該是一個2列布局（在臺式機，反正），但就像我說的一切都在火狐22頁的連續頂部聚集在一起。

來源

2013-07-02 Azrael

根據[caniuse]（http://caniuse.com/flexbox），所有最新版本的FF都不支持'flex-flow'屬性 – Adrift

只需柔性流動？這是否包括彎曲方向和包裝？ – Azrael

我忘了提及'flex-wrap'屬性也不支持。 Firefox正在實施舊版本的Flexbox模塊。 – Adrift

Firefox不支持包裝。要隱藏從Firefox Flexbox的，直到有一天，它並終於支持包裝，使用功能查詢：

@supports (flex-wrap: wrap) { 
    body { 
     display: flex; 
    } 
}

你只需要隱藏顯示屬性，所有其他Flexbox的屬性將沒有它被忽略。

來源

2013-07-02 20:20:27 cimmanon

Mozilla已經確認了這個錯誤，並且已經提交了一張票來解決這個問題。（https://bugzilla.mozilla.org/show_bug.cgi?id=702508） – zakdances

糾錯：Mozilla承認他們缺少包裝2009年的實施（但是2009年沒有實施支持包裝），並表示「不打算修復它，因爲我們正在研究現代版本」。他們*故意*選擇發佈其現代Flexbox版本而不支持包裝。這不是一個「錯誤」。 – cimmanon

無論你是否想將它稱爲一個錯誤，我在評論中鏈接到的問題顯示，Mozilla已將它提交給Bugzilla，其票證ID爲「Bug 702508」。 – zakdances

好消息是，Mozilla終於有了fixed it。它已經在Firefox Nightly build 28.0a1中運行。根據rapid release calendar，FF28將於2014年3月發貨。

來源

2013-12-10 13:17:42

看在上帝的份上！這是時間...謝謝。 –

CSS3 FlexBox在Firefox中無法正確顯示22

回答

相關問題