IE гибкая коробка модель не работает

Question

Im пытается реализовать гибкую модель коробки на моем веб-сайте, и пока она работает для -webkit-браузеров, таких как хром и сафари, другие браузеры, такие как mozilla и opera, я, возможно, работая в Internet Explorer, независимо от того, что я делаю. Вот короткий фрагмент моего файла стилей Css, содержащий мой класс .holder, в котором хранятся все, и мой id #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 из отчаяния, хотя это не помогло, попробовал установить плагин Chrome для IE, хотя это тоже не удалось, и я не знаю, что делать парням. Может быть, может возникнуть проблема синтаксиса с css, который я уже написал, это отбрасывает его, но, как я уже сказал, он отлично работает в других браузерах. Любые предложения или советы?

Answer 1

IE не использует deprecated 2009 Flexbox properties, он использует те, которые устарели March 2012 draft. Opera поддерживает свойства Flexbox standard без префиксов и свойств 2009 года в префиксе -webkit.

.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 +