Css flexbox柱和IE

在Chrome和Firefox中一切都很好，但是你猜怎么着，我在IE中遇到了一个问题！（IE11）

在我的响应式布局中，我希望菜单在pc模式下保持水平，在平板电脑/移动模式下保持垂直。它就是这样做的，但在IE中，菜单项没有高度。如果使用开发工具进行检查，它们都会塌陷到0高度。我不知道为什么

有人会有主意吗

我为它做了一个密码笔：

这是密码

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

标题{背景：青色；}
导航{背景：bisque；}
.main-a{背景：西红柿；}
.main-b{背景：浅蓝色；}
页脚{背景：浅粉色；}
.headerContainer导航{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：列nowrap；
弯曲方向：立柱；
}
.主容器导航>a{
填充物：5px10px；
文本对齐：居中；
背景：#fcd113；
边框：6eac2c实心1px；
边框宽度：0 0 1px；
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
@介质和全部（最小宽度：600px）{
.包装纸{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：行nowrap；
弯曲方向：行；
}
.wrapper>.headerContainer{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
.wrapper>.main容器{
-webkit-box-flex:2；
-moz-box-flex:2；
-webkit-flex:2；
-ms-flex:2；
弹性：2；
}
.主集装箱{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：行nowrap；
弯曲方向：行；
}
.main-container.main-a{
-webkit-box-flex:2；
-moz-box-flex:2；
-webkit-flex:2；
-ms-flex:2；
弹性：2；
-webkit盒序数组：2；
-moz盒序数组：2；
-ms弹性订单：2份；
-网络工具包订单：2份；
顺序：2；
}
.main-container.main-b{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
-webkit盒序数组：1；
-moz盒序数组：1；
-ms弹性订单：1；
-网络工具包订单：1；
顺序：1；
}
}
@介质和全部（最小宽度：800px）{
.包装纸{
显示：块；
}
.校长{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex flow：行nowrap；
弯曲方向：行；
}
.headerContainer标题{
-webkit-box-flex:1200px；
-moz-box-flex:1200px；
-webkit flex:1200px；
-ms-flex:1200px；
flex:1200px；
}
.headerContainer导航{
-webkit box flex:1100%；
-moz-box flex:1100%；
-webkit flex:1100%；
-ms-flex:1100%；
弹性：1100%；
-webkit flex flow：行nowrap；
弯曲方向：行；
}
}
标志
主要内容A
主要内容B
页脚

删除

中的
flex
项。headerContainer nav>a

修复了该问题。在IE11和Chrome中测试

---

。。。虽然这确实破坏了更广泛的布局-因此您必须将它们放回>800px媒体查询中。

我在IE11中遇到了一个非常类似的问题

显然，问题与IE对

flex

属性的实现有关

在IE10中，flex的默认值是0 0自动，而不是0 1自动 在最新规范中定义

资料来源：

将

flex

属性显式设置为

10 auto

解决了我的案例中的问题

---

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

顺便说一句，在我的桌面上，菜单也是垂直的。我用缺少的媒体查询保存了代码笔Thx！嗯，刚刚看到这上面的日期。。。您可能已经修复了它；）IE再次落后于规范。强制规范值确实解决了问题。非常感谢。你是说01自动，对吗？尝试修复它，但无法修复，因为它少于6个字符（需要编辑）-因此，如果这是你的意思，请自己更改：）angular flexbox框架的flex basis值为100%，除了ie 11，它肯定希望flex basis为“自动”，现在它可以工作了