CSS Flexbox可以在除Safari之外的所有瀏覽器上工作嗎？

所以我正在爲一個網站的導航工作，我使用的是flexbox，它似乎適用於除safari之外的所有瀏覽器？這是一個常見問題？CSS Flexbox可以在除Safari之外的所有瀏覽器上工作嗎？

#nav ul{ 
    list-style: outside none none; 
    margin: auto; 
    padding: 0; 
    display:-webkit-box; 
    display:-moz-flex; 
    display:-moz-box; 
    display:-ms-flexbox; 
    display:flex; 
    width: 96.5%; 

} 
#nav ul li{ 
    display: inline-block; 
    /*width: 9%;*/ 
    position: relative; 
    -webkit-flex:1; 
    -webkit-box:1; 
    -moz-flex:1; 
    -moz-box-flex:1; 
    -ms-flex:1; 
    flex:1; 

}

來源

2016-02-23 EwaCas

http://caniuse.com/#feat=flexbox - 請出示預期在Safari – fcalderan

的[Flexbox的代碼可能重複的工作不工作一MVCE在除Safari之外的所有瀏覽器上。爲什麼？]（http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why） –

safari是什麼版本？顯示：-webkit-box;應該在版本6+上工作，您是否嘗試檢查元素並在css規則中查看是否存在渲染問題？ – peterpeterson

這似乎解決我的問題

#nav ul{ 
    list-style: outside none none; 
    margin: auto; 
    padding: 0; 
    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; 
    width: 96.5%; 

} 
#nav ul li{ 

    /*width: 9%;*/ 
    position: relative; 
    -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 1;   /* OLD - Firefox 19- */ 
    width: 20%;    /* For old syntax, otherwise collapses. */ 
    -webkit-flex: 1;   /* Chrome */ 
    -ms-flex: 1;    /* IE 10 */ 
    flex: 1; 

}

來源

2016-02-23 17:23:59 EwaCas

CSS Flexbox可以在除Safari之外的所有瀏覽器上工作嗎？

回答

相關問題