Flexbox无法在Internet Explorer 11中运行

Question

这段代码在Firefox,Chrome和Edge中运行良好,但由于flex模型,它在IE11中无法正常工作.我该如何解决？

这就是它在Firefox中的样子

这就是它在IE11中的外观

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

Answer 1

据Flexbugs说:

在IE 10-11中,min-heightflex容器的声明用于调整容器本身的大小,但是它们的flex项目孩子似乎不知道父项的大小.它们表现得好像根本没有设置高度.

以下是一些解决方法:

1.始终填充视口+可滚动<aside>和<section>:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1;
  display: flex;
}

aside, section {
  overflow: auto;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}

<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

2.最初填充视口+正常页面滚动包含更多内容:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  flex: 1 0 auto;
  display: flex;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}

<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

Answer 2

有关IE11 Flexbox错误的完整列表,请参阅"我可以使用"等

IE11和其他浏览器中存在大量Flexbox错误 - 请参阅我可以使用的flexbox - >已知问题,IE11中列出了以下内容:

• IE 11要求将一个单元添加到第三个参数,即flex-basis属性
• 在IE10和IE11中,如果容器具有但没有明确的属性,则容器具有display: flex并且flex-direction: column将不会正确计算其弯曲的子尺寸min-heightheight
• IE 11在min-height使用时不会正确地垂直对齐项目

另请参阅Philip Walton的Flexbugs问题列表和解决方法.

Answer 3

我使用flexbox测试了一个完整的布局,它包含页眉,页脚,带左,中,右面板的主体,面板可以包含应滚动的菜单项或页脚和标题.很复杂

IE11甚​​至IE EDGE在显示弹性内容方面存在一些问题,但可以克服.我已经在大多数浏览器中测试了它,它似乎工作.

我应用的一些修复是IE11高度错误,添加高度:100vh和最小高度:100%到html/body.这也有助于不必在dom中设置容器的高度.也使body/html成为一个flex容器.否则IE11将压缩视图.

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

IE EDGE溢出Flex容器的修复程序:overflow:隐藏在主Flex容器上.如果删除溢出,IE EDGE会将内容从视口中推出,而不是将其包含在flex主容器中.

main{
    flex:1 1 auto;
    overflow:hidden; /* IE EDGE overflow fix */  
}

您可以在我的codepen页面上查看我的测试和示例.我用我已经应用的修复程序评论了重要的css部分,希望有人发现它很有用.