flexbox列和IE

Question

在Chrome和Firefox中一切正常，但猜猜看，我在IE中遇到問題！ （IE11）

在我的響應式佈局中，我希望菜單在pc模式下爲水平，在平板電腦/移動模式下爲垂直。它的確如此，但在IE中，菜單項沒有高度。如果使用開發人員工具進行檢查，它們都會崩潰到0高度。我找不到原因。

任何人都會有想法嗎？

我做了一個codepen吧： http://codepen.io/Reblutus/pen/qjacv

下面是代碼

<style> 
header { background: cyan;} 
nav { background: bisque;} 
.main-a { background: tomato;} 
.main-b { background: lightblue;} 
footer { background: lightpink;} 

.headerContainer nav { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column nowrap; 
    flex-direction: column; 
} 

.headerContainer nav > a { 
    padding: 5px 10px; 
    text-align: center; 
    background: #fcd113; 
    border: #6eac2c solid 1px; 
    border-width: 0 0 1px; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
} 
@media all and (min-width: 600px) { 
    .wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .wrapper > .headerContainer { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    } 
    .wrapper > .mainContainer { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    } 
    .mainContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .mainContainer .main-a { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    -webkit-box-ordinal-group: 2; 
     -moz-box-ordinal-group: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
      order: 2; 
    } 
    .mainContainer .main-b { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    -webkit-box-ordinal-group: 1; 
     -moz-box-ordinal-group: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
      order: 1; 
    } 
} 

@media all and (min-width: 800px) { 
    .wrapper { 
    display: block; 
    } 
    .headerContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .headerContainer header { 
    -webkit-box-flex: 1 200px; 
     -moz-box-flex: 1 200px; 
    -webkit-flex: 1 200px; 
     -ms-flex: 1 200px; 
      flex: 1 200px; 
    } 
    .headerContainer nav { 
    -webkit-box-flex: 1 100%; 
     -moz-box-flex: 1 100%; 
    -webkit-flex: 1 100%; 
     -ms-flex: 1 100%; 
      flex: 1 100%; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
} 
</style> 
<div class="wrapper"> 
    <div class="headerContainer"> 
     <header>Logo <i class="fa fa-camera-retro"></i>   </header> 
    <nav> 
      <a href="javascript:;">Home</a> 
      <a href="javascript:;">About Us</a> 
      <a href="javascript:;">Our Properties</a> 
      <a href="javascript:;">Clients & Partners</a> 
     </nav> 
    </div> 
    <div class="mainContainer"> 


<div class="main main-a">Main content A</div> 
<div class="main main-b">Main content B</div> </div> 
</div> 
<footer>footer</footer> 

Answer 1

我有一個非常類似的問題與IE11。

顯然這個問題是關於IE執行flex屬性的。

在IE10中，flex的默認值爲0 0 auto而不是0 1 auto作爲 在最新規範中定義。

來源：http://caniuse.com/#feat=flexbox

明確的flex屬性設置爲1 0 auto糾正這個問題我的情況。

因此，無論您在何處設置flex屬性，都要更新值以匹配此顯式格式。

Answer 2

去除.headerContainer nav > a修復的問題flex項目。經過IE11和Chrome測試。

...雖然這確實打破了更廣泛的佈局 - 所以你將不得不把它們放回> 800px媒體查詢。