Flexbox không hoạt động bình thường trên Firefox nhưng không sao trên Chrome & Safari

Question

Tôi đang xây dựng một trang web dựa chủ yếu vào flexbox. Chỉ có vấn đề là tôi không thể làm cho nó bắt chước hành vi chrome trên Firefox. Tôi đã xem CSS-Tricks, SO và tại bài viết này (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)

Tất cả những điều này rất hay và đưa ra một số gợi ý tốt, không có đề xuất nào phù hợp với tôi. Tôi đã thử đặt

* { 
    min-height: 0; 
    min-width: 0; 
} 

Và mọi biến thể trên phần tử con và phụ huynh của tôi, nhưng không có kết quả. Tôi đã bao gồm một liên kết CodePen minh họa vấn đề của tôi. Khi mở trong FF 37.0.2 và 46.0.1, nó hoàn toàn bị hỏng. Trong Chrome và Safari, có vẻ ổn.

/* Header Styles */ 

#header{ 
    width:85%; 
    margin:0 auto; 
    height:375px; 
    background-color:rgba(252,241,223, 1); 
    padding:25px 75px 25px 0; 
    font-family: 'Quattrocento Sans', sans-serif; 
    border-radius:3px 3px 0 0; 
} 


#header-logo{ 
    width:33%; 
    height:100%; 
    display:flex; 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    align-items:center; 
    justify-content:center; 
    float:left; 
} 

#header-nav{ 
    width:66%; 
    height:100%; 
    display:flex; 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    justify-content:center; 
/* align-items:center;*/ 
    flex-direction:column; 
} 
#header-nav-tabs{ 
    margin-top:25px; 
    padding-top:25px; 
    border-top:1px solid rgba(0,0,0,0.5); 
} 

#header-nav-tabs a{ 
    font-size: 20px; 
    color:black; 
    text-decoration:none; 
    margin:0 10px; 
    white-space: nowrap; 
} 

#header-nav-tabs a:hover{ 
    text-decoration:underline; 
} 


@media screen and (max-width: 680px) { 

    #header{ 
     height:auto; 
     text-align:center; 
     padding:25px; 
     display:flex; 
     display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
     display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
     display: -ms-flexbox;  /* TWEENER - IE 10 */ 
     display: -webkit-flex;  /* NEW - Chrome */ 
     flex-direction: column; 
     align-items: center; 
    } 

    #header-logo{ 
     width:auto; 
     height:auto; 
    } 

    #header-nav{ 
     width:auto; 
     height:auto; 
    } 

    #header-nav-tabs a{ 
     font-size:17px; 
    } 


} 

<header id="header" role="banner"> 
<div id="header-logo"> 
    <img src="http://staging.thestarvingsailor.ca/wp-content/uploads/2016/01/Moore-Logo.png" /> 
</div> 

<div id="header-nav"> 

    <div id="header-nav-title"> 
     <h1>Test Site</h1> 
     <p>Description for the test site.</p> 
    </div> 

    <div id="header-nav-tabs"> 
     <a href="http://www.moorefamilychiropractic.ca">Home</a> 
     <a href="http://www.moorefamilychiropractic.ca/about-us">About Us</a> 
     <a href="http://www.moorefamilychiropractic.ca/services">Services</a> 
     <a href="http://www.moorefamilychiropractic.ca/reviews">Reviews</a> 
     <a href="http://www.moorefamilychiropractic.ca/blog">Blog</a> 
     <a href="http://www.chirocorrection.com/moorechiro/" target="_blank" rel="noopener noreferrer">My ChiroCorrection</a> 
     <a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me">How Can Chiropractic Help Me?</a> 
     <a href="http://www.moorefamilychiropractic.ca/contact-us">Contact Us</a> 
    </div> 

</div> 
</header> 

http://codepen.io/anon/pen/mPYZGY

Answer 1

Vấn đề là thứ tự của các tiền tố của bạn.

Luôn đặt thuộc tính chính thức (tiêu chuẩn W3C) cuối cùng trong danh sách.

Công cụ hiển thị CSS sẽ chọn thuộc tính hiện hành cuối cùng. Firefox đang đọc qua display: flex và chọn display: -moz-box, điều này gây ra sự cố.

Thông tin chi tiết: What is the proper way to order vendor prefixes for flexbox?

Answer 2

Hãy thử thay đổi thứ tự của các tờ khai tài sản display như vậy mà tiêu chuẩn là cuối cùng. Tôi nghĩ FF đang cho phép thuộc tính tiền tố -moz ghi đè giá trị được khai báo trước đó.

display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
display: -ms-flexbox;  /* TWEENER - IE 10 */ 
display: -webkit-flex;  /* NEW - Chrome */ 
display:flex;