-webkit-box-orient和-webkit-box-flex瀏覽器的競爭力

我有一個跨瀏覽器兼容性問題，我試圖尋找一個IE9/IE10和Firefox的解決方案。-webkit-box-orient和-webkit-box-flex瀏覽器的競爭力

nav { 
    -webkit-box-orient: horizontal; 
} 
nav a { 
    -webkit-box-flex:1; 
}

上面的代碼似乎只能在Chrome中工作。 Mozilla是否具有瀏覽器特定的代碼？ IE瀏覽器有特定的代碼嗎？

網站的代碼是在提前http://www.daven.nl/

感謝。

來源

2013-02-01 Perfection

Firefox使用-moz和IE使用-ms作爲其供應商前綴。然而-ms在大多數版本中不被支持，我相信IE 10是唯一支持-ms的版本。

http://www.w3schools.com/cssref/css3_pr_box-orient.asp

http://www.w3schools.com/cssref/css3_pr_box-flex.asp

/* Firefox */ 
display:-moz-box; 
-moz-box-orient:horizontal; 

-moz-box-flex:2.0;

我會嘗試在這個IE 10，看看它是否工作。根據W3，它看起來不像IE在IE中有很多支持。但值得一試。

display:-ms-box; 
-ms-box-orient:horizontal; 

-ms-box-flex:2.0;

來源

2013-02-01 15:22:24

謝謝，這讓我朝正確的方向邁出了一步。 – Perfection

我已經實現了相同代碼的firefox和IE10版本以及W3C特定標準。但它似乎只是不會做firefox和IE9中的意圖。（沒有測試IE10，因爲我沒有在這臺工作站上使用它，因爲這個政策，不能在這裏下載，只能等到公司更新了。） – Perfection

是的，這似乎是正確的。我懷疑你會有任何運氣讓它與IE9和以下的工作。不幸的是，IE 9及以下版本並不完全支持CSS3屬性。 9支持相當多，8及以下的支持很少，如果有的話。 –

IE9根本不支持flexbox。基本上有3種不同的規格已經由不同的瀏覽器供應商實施。

2012年9月候選人推薦（http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/）
2012年3月工作草案（http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/）
2009年7月工作草案（http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/）

與Firefox 20開始，你只需要關注2012年的規格：IE10遵循3月份的規格，其他人則從9月份開始。如果您想在2009年草案之後支持瀏覽器，請注意，Mozilla不支持flex-wrap。我知道這在最近的Firefox版本中仍然是一個投訴，它對新版草稿有實驗支持（默認禁用）。不知道這是否應該在版本20中修復。

我已經寫了一個集合在Sass中的mixins（取決於2個羅盤mixins），它將涵蓋所有的規格。有評論顯示給定草案不存在哪些屬性或值。

https://gist.github.com/4461470

來源

2013-02-01 15:41:27 cimmanon

如果你不介意我在這裏問問什麼是mixin？ – Perfection

它們基本上是一個包含可重用CSS的函數。請參閱：http://sass-lang.com/。您不必使用Sass，但這可能是目前唯一一份匹配每個草稿的每個屬性/值的文檔。 – cimmanon

謝謝，我會研究它。 – Perfection

我試穿一下IE10，它似乎是罰款。

-ms-flex:1 0 auto;

來源

2013-04-18 06:11:00 xzysun

-webkit-box-orient和-webkit-box-flex瀏覽器的競爭力

回答

相關問題