flexbox列和IE [英] flexbox columns and IE

问题描述

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

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

任何人都有想法吗？

我为它做了一个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; 
显示：-moz-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-flex-flow：列nowrap; 
 flex-direction：column; 
} 
 
 .headerContainer nav>一个{
填充：5px 10px; 
 text-align：center; 
背景：＃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和（min-width：600px）{
 .wrapper {
 display：-webkit-box; 
显示：-moz-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-flex-flow：行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; 
显示：-moz-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-flex-flow：行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; 
 
 
 $ b $ @全部和（最小宽度：800px）{
 .wrapper {
 display：block; 
} 
 .headerContainer {
 display：-webkit-box; 
显示：-moz-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-flex-flow：行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：行nowrap; 
 flex-direction：row; 
} 
} 
< / style> 
< div class =wrapper> 
< div class =headerContainer> 
< header>徽标< i class =fa fa-camera-retro>< / i> < /报头> 
< nav> 
< a href =javascript：;>主页< / a> 
< a href =javascript：;>关于我们< / a> 
< a href =javascript：;>我们的属性< / a> 
< a href =javascript：;>客户&伙伴< / A> 
< / nav> 
< / div> 
< div class =mainContainer> 
 
 
< div class =main main-a>主要内容A< / div> 
< div class =main main-b>主要内容B< / div> < / DIV> 
< / div> 
< footer>页脚< /页脚> 
  

解决方案

我和IE11有一个非常相似的问题。 p>

显然问题在于IE执行 flex 属性。
$ b

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

资料来源： http://caniuse.com /＃feat = flexbox

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

因此，任何地方你有flex属性设置，更新值以匹配这种明确的格式。

Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11)

In my responsive layout I want to menu to be horizontal in pc mode and vertical in tablet/mobile mode. It does just that, but in IE the menu items have no height. They all collapse to 0 height if inspected with the developer tool. I can't find why.

Anyone would have an idea?

I made a codepen for it: http://codepen.io/Reblutus/pen/qjacv

Here is the code

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

解决方案

I had a very similar issue with IE11.

Apparently the issue is to do with IE's implementation of the flex property.

In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

Source: http://caniuse.com/#feat=flexbox

Explicitly setting the flex property to 1 0 auto remedied the issue for my case.

So anywhere you have the flex property set, update the values to match this explicit format.

这篇关于flexbox列和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！