Проблемы с совместимостью css3 flexbox с Firefox и Safari

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, но Firefox реализовал эти префикс бесплатно (только свойства 2009 должны иметь префикс moz).

Даже если вы исправите все эти вещи, он все равно не будет работать в Safari или Firefox. Зачем?

• До тех пор, пока iOS7 не выйдет, Safari только реализует проект Flexbox 2009 года. Он не реализует box-lines: multiple, что и позволяет обертывать в этом черновике
• В Firefox реализована реализация черновиков проекта и, но ни одна из них не поддерживает упаковку.