我正在尝试整理我的flexbox布局,以便它与最新版本的IE/Firefox/Safari兼容,并且我在使用Firefox/Safari时遇到了问题。
建议布局:
-----------------
header
-----------------
|
|
|
nav | section
|
|
|
|
在Firefox和Safari中,<section>
在nav
之下
.CSS:
body {
width:50%;
height:100%;
display: -ms-flexbox;
-ms-box-orient: horizontal;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flexbox;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
header {
padding-top:100px;
-webkit-flex: 1 100%;
-moz-flex: 1 100%;
-ms-flex: 1 100%;
flex: 1 100%;
}
nav {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
width:10%;
height:100%;
}
section {
-webkit-flex: 4;
-moz-flex: 4;
-ms-flex: 4;
flex: 4;
width:40%;
height:100%;
}
首先,这个:
body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flexbox;
}
应该是这样的:
body {
display: -ms-flexbox;
display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
body {
display: flex;
}
}
这没有任何作用,因为IE没有实现2009年Flexbox草案:
body {
-ms-box-orient: horizontal;
}
您还从标准 Flexbox 草稿的属性上添加了 moz 前缀,但 Firefox 免费实现了这些前缀(只有 2009 属性应该有 moz 前缀(。
即使你修复了所有这些问题,它仍然无法在Safari或Firefox中工作。 为什么?
- 在iOS7问世之前,Safari只实现了2009年的Flexbox草案。 它无法实现
box-lines: multiple
,这就是允许包装在该草案中的原因 - Firefox 有 2009 年草案和标准草案的实现,但两个实现都不支持包装。