何らかの理由で、Firefox 22 で取り組んでいるプロジェクトが正しく表示されません。Webkit ブラウザーで正常に動作します (Opera 15 および Chrome 27 でテスト済み。Safari は、更新された仕様を 7.0 までサポートしません)。すべてが行にグループ化されているだけなので、最初に考えたのは、フレックス方向を行ではなく列に変更することでしたが、それは役に立ちませんでした.
* {
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 ではすべてがページの上部に一列にまとめられています。