Firefox和Safari的css3 flexbox兼容性问题

Question

我正在尝试整理我的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%;
}

Answer 1

首先,这个:

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年草案和标准草案的实现,但两种实现都不支持包装.