Problemy z kompatybilnością gss3 flexbox z Firefoksem i Safari

Question

Próbuję uporządkować mój układ flexbox, tak aby był zgodny z najnowszymi wersjami IE/Firefox/Safari, i mam problemy z Firefoksem/Safari.

Proponowany układ:

----------------- 
    header 
----------------- 
    | 
    | 
    | 
nav | section 
    | 
    | 
    | 
    | 

W Firefoksie i Safari <section> jest pod 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

Po pierwsze, to:

body { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flexbox; 
} 

Powinno być tak:

body { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
} 
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */ 
    body { 
     display: flex; 
    } 
} 

To nic nie robi, ponieważ IE nie ma realizację projektu 2009 schematu flexbox:

body { 
    -ms-box-orient: horizontal; 
} 

Ty też dodał ten moz prefiks na właściwości ze standardowej wersji Flexbox, ale Firefox zaimplementował ten prefiks za darmo (tylko właściwości 2009 powinny mieć prefiks moz).

Nawet jeśli naprawisz wszystkie te rzeczy, nadal nie będzie działać w Safari ani Firefox. Czemu?

• Dopóki nie pojawi się iOS7, Safari ma tylko wersję roboczą Flexbox z 2009 roku. Nie udało się zaimplementować box-lines: multiple, która umożliwia zawijanie w tym projekcie
• Firefox ma implementację dla wersji roboczych i ze standardową wersją roboczą, ale żadna z implementacji nie obsługuje owijania.