3

由于某种原因，我在 Firefox 22 中处理的项目无法正确显示。在 webkit 浏览器中运行良好（在 Opera 15 和 Chrome 27 中测试；Safari 直到 7.0 才支持更新的规范）。一切都只是按行分组在一起，所以我的第一个想法是将 flex-direction 更改为列而不是行，但这甚至没有帮助。

* {
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 的页面顶部连续排列在一起。

4

2 回答 2

6

Firefox 不支持换行。要在 Firefox 中隐藏 Flexbox，直到它最终支持包装，请使用功能查询：

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

您只需要隐藏 display 属性，没有它，所有其他 Flexbox 属性都将被忽略。

于 2013-07-02T20:20:27.557 回答
4

好消息是 Mozilla 终于修复了它。它已经在 Firefox Nightly build 28.0a1 中运行。根据快速发布日历，FF28 将于 2014 年 3 月发货。

于 2013-12-10T13:17:42.327 回答