vấn đề tương thích với css3 flexbox với Firefox và Safari

Question

Tôi đang cố gắng sắp xếp bố cục flexbox của mình để nó tương thích với các phiên bản mới nhất của IE/Firefox/Safari và tôi gặp sự cố với Firefox/Safari.

Đề xuất bố trí:

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

Trong Firefox và Safari <section> là bên dưới 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

Trước hết, điều này:

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

nên là thế này:

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

này không làm bất cứ điều gì vì IE không có một thực hiện các dự thảo 2009 Flexbox:

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

Bạn cũng đã thêm tiền tố MOZ trên các thuộc tính từ bản nháp Flexbox tiêu chuẩn, nhưng Firefox đã thực thi các tiền tố đó miễn phí (chỉ các thuộc tính năm 2009 phải có tiền tố moz).

Ngay cả khi bạn khắc phục tất cả những việc này, nó vẫn không hoạt động trong Safari hoặc Firefox. Tại sao?

• Cho đến khi iOS7 xuất hiện, Safari chỉ thực hiện dự thảo Flexbox 2009. Không thể triển khai box-lines: multiple, đó là những gì cho phép gói trong bản nháp đó
• Firefox có triển khai cho dự thảo năm 2009 và bản nháp chuẩn, nhưng không hỗ trợ triển khai gói.