IE靈活的框模型不工作

Question

我試圖實現靈活的框模型到我的網站，而其工作的瀏覽器如Chrome瀏覽器和Safari瀏覽器，其他瀏覽器如mozilla和opera，我似乎無法得到它在Internet Explorer中工作，無論我做什麼。下面是我的Css樣式表文件的簡短片段，其中包含我的.holder類，它包含了所有內容，還有我的#new_div標識，它是.holder的一個子標題，用於存放帖子和邊欄的主要部分。

.holder 
{ 
    width:100%; 
    margin:auto; 
    display:-webkit-box; 
    display:-o-box; 
    display:-ms-box; 
    display:-box; 
    display:-pie; 
    -webkit-box-orient:vertical; 
    -moz-box-orient:vertical; 
    -o-box-orient:vertical; 
    -ms-box-orient:vertical; 
    -box-orient:vertical; 
    -pie-box-orient:vertical; 
    -moz-box-flex:1; /* Firefox, seamonkey etc */ 
    -o-box-flex:1;  /* Opera */ 
    -ms-box-flex:1;  /* MSIE */ 
    -box-flex:1;   /* Any that support full implementation */ 
    -pie-box-flex:1; 
    -webkit-box-flex:1; 
    -webkit-box-pack:center; 
    -o-box-pack:center; 
    -ms-box-pack:center; 
    -pie-box-pack:center; 
    -box-pack:center; 
    text-align:center; 
    behavior: url(../../Content/pie/PIE.htc); 
} 

.holder #new_div 
{ 
    width:940px; 
} 
.holder div 
{ 
    -webkit-box-pack:center; 
    -o-box-pack:center; 
    -ms-box-pack:center; 
    -box-pack:center; 
    -pie-box-pack:center; 
    behavior: url(../../Content/pie/PIE.htc); 
} 
#new_div 
{ 
    margin:auto; 
    display:-webkit-box; 
    display:-moz-box; 
    display:-o-box; 
    display:-ms-box; 
    display:-box; 
    display:-pie-box; 
    text-align:left; 
    -webkit-box-flex:1; 
    -moz-box-flex:1; /* Firefox, seamonkey etc */ 
    -o-box-flex:1;  /* Opera */ 
    -ms-box-flex:1;  /* MSIE */ 
    -box-flex:1; 
    -pie-box:1;  
    -webkit-box-pack:center; 
    -box-pack:center; 
    -moz-box-pack:center; 
    -o-box-pack:center; 
    -ms-box-pack:center; 
    -pie-box-pack:center; 
    background-color:#25282D; 
    -webkit-box-orient:horizontal; 
    -moz-box-orient:horizontal; 
    -o-box-orient:horizontal; 
    -ms-box-orient:horizontal; 
    -box-orient:horizontal; 
    -pie-box-orient:horizontal; 
    min-width:940px; 
    padding:20px; 
    behavior: url(../../Content/pie/PIE.htc); 
} 

在那裏你可以看到我有--ms-box- ..名稱與其他定義一起定義，但它似乎還沒有註冊。我已經嘗試過使用CSS3Pie庫，儘管這沒有奏效，但試過爲IE安裝Chrome插件，儘管這也失敗了，我想出了什麼做傢伙的想法。也許可能有一個語法問題，我已經寫了這個CSS扔掉了，但正如我所說的，它在其他瀏覽器中工作正常。任何建議或提示？

Answer 1

IE不使用deprecated 2009 Flexbox properties，它使用已棄用的March 2012 draft中的那些。 Opera支持Flexbox standard屬性，沒有前綴和-webkit-前綴下的2009屬性。

.holder { 
    width: 100%; 
    margin: auto; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    text-align: center; 
} 

.holder #new_div { 
    width: 940px; 
} 

.holder div { 
    /* justify-content does nothing here since this element isn't a flex container */ 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

#new_div { 
    margin: auto; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    text-align: left; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    /* this shouldn't be necessary, as the default direction is `row` */ 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    min-width: 940px; 
    padding: 20px; 
} 

另外值得注意的，這需要IE10 +