Firefox和IE上的CSS Flexbox不正確

我最近一直在使用flexbox開發一個網站，並且一直在Chrome上這樣做。該網站在Chrome瀏覽器（和Safari瀏覽器，根據用戶）看起來很完美，但是在Firefox和IE瀏覽器上查看時，它存在一些嚴重問題。我試着在網上查找關於哪些前綴包含在我的CSS中以及如何使它在這些瀏覽器上顯示正常的文檔，但我真的無法在任何地方找到總結或教程。這裏是我的CSS代碼樣本，含有不上Firefox和IE瀏覽器中正確顯示flexboxs -Firefox和IE上的CSS Flexbox不正確

.header { 
    padding: 12px; 
    padding-top: 10px; 
    padding-bottom: 0px; 
    margin: 0px; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
    height: 70px; 
    background-color: #000000; 
} 

.header-box { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    align-items: flex-start; 
    height: 70px; 
    width: 1170px; 
    background-color: #000000; 
}

該代碼可用於沿線站點的頂部標題欄。我想通過包括display: -moz-box;等，這將允許它在Firefox上看到，但格式化是混亂的意義上，該框不居中，而是沿着屏幕的左側，並在標題框都沿着父容器的頂部而不是底部。感謝您對此問題的任何洞察！

來源

2015-06-05 Marko

從版本20開始，Firefox支持'display：flex'，你不需要'display：-moz-box'。並請張貼您的HTML。請參見[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – Oriol

感謝您的快速回復，我想我找到了一個罪魁禍首 - 它在'-webkit-flex-flow：row wrap'這一行中。添加另一行'flex-flow：row wrap';至少修復了firefox的一些格式問題，這讓我認爲我可能有許多格式化命令，前綴爲-webkit，firefox無法讀取 – Marko

是的，我只是在一個答案中寫的。 '-webkit-'是供應商的前綴，不要期望所有瀏覽器都能識別它。始終包含標準的前綴版本。 – Oriol

在僅適用於WebKit瀏覽器，因爲你只用

-webkit-flex-flow: row wrap;

你應該使用標準

flex-flow: row wrap;

否則，初始值row nowrap將被用來代替。

來源

2015-06-05 16:01:25 Oriol

Firefox和IE上的CSS Flexbox不正確

回答

相關問題