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

回答

相关问题