Question

出于某种原因，我在Firefox 22中工作的项目无法正常显示。在webkit浏览器中工作得很好（在Opera 15和Chrome 27中测试过; Safari赢得了支持更新的规范，直到7.0）。所有东西都按行组合在一起，所以我的第一个想法是将flex-direction更改为column而不是row，但这甚至没有帮助。

* {
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列布局（无论如何都在桌面上），但就像我说的所有内容在Firefox 22的页面顶部连在一起。

Answer 1

Firefox不支持包装。要将Flexbox从Firefox隐藏到最终支持包装的那一天，请使用功能查询：

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

您只需要隐藏显示属性，没有它就会忽略所有其他Flexbox属性。

Answer 2

好消息是Mozilla终于fixed it了。它已经在Firefox Nightly版本28.0a1中运行。根据{{3}}，FF28将于2014年3月发货。

在Firefox 22中，CSS3 FlexBox无法正确显示

2 个答案: