css3 flexbox 与 Firefox 和 Safari 的兼容性问题

我正在尝试整理我的 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 年草案的实现and标准草案，但两个实现都不支持换行。