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 as   在最新的规范中定义。

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

明确将flex属性设置为1 0 auto可以解决我的问题。

因此，无论您在哪里设置flex属性，都要更新值以匹配此显式格式。

Answer 2

删除flex中的.headerContainer nav > a项可解决问题。在IE11和Chrome中测试过。

...虽然这确实打破了更广泛的布局 - 因此您必须将它们重新放入＆gt; 800px媒体查询。