flexbox 列和 IE

Posted 2023-03-06

【中文标题】flexbox 列和 IE

【英文标题】：flexbox columns and IE

【发布时间】：2013-12-06 00:32:59

【问题描述】：

在 Chrome 和 Firefox 中一切正常，但猜猜看，我在 IE 中遇到了问题！ (IE11)

在我的响应式布局中，我希望菜单在 pc 模式下是水平的，在平板电脑/移动模式下是垂直的。它就是这样做的，但在 IE 中，菜单项没有高度。如果使用开发人员工具进行检查，它们都会折叠到 0 高度。我找不到原因。

有人有想法吗？

我为它制作了一个代码笔： 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>

【问题讨论】：

顺便说一句，我的桌面上的菜单也是垂直的。

我保存了缺少媒体查询的 codepen，谢谢！

【参考方案1】：

我在 IE11 上遇到了非常相似的问题。

显然问题与 IE 对 flex 属性的实现有关。

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

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

将flex 属性显式设置为1 0 auto 解决了我的问题。

因此，在您设置了 flex 属性的任何地方，更新值以匹配此显式格式。

【讨论】：

IE 再次落后于遵循规范。强制规范值确实可以解决问题。谢谢！

你的意思是 0 1 auto，对吧？尝试修复它，但不能，因为它少于 6 个字符（需要编辑） - 所以如果这就是你的意思，请自行更改 :)

Angular flexbox 框架的 flex-basis 值为 100%，除 ie 11 外，它在任何地方都可以使用，它肯定希望 flex-basis 为“auto”，现在它可以工作了

【参考方案2】：

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

...虽然这确实破坏了更广泛的布局 - 所以你必须将它们放回 >800px 媒体查询。

【讨论】：

嗯，刚刚看到日期……你可能已经修好了；）