Flexbox 在 Internet Explorer 11 中不起作用

Posted 2023-03-05

【中文标题】Flexbox 在 Internet Explorer 11 中不起作用

【英文标题】：Flexbox not working in Internet Explorer 11

【发布时间】：2016-10-20 17:15:28

【问题描述】：

这段代码在 Firefox、Chrome 和 Edge 中运行良好，但显然在 IE11 中由于 flex 模型而无法正常运行。我该如何解决？

这是它在 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>

【问题讨论】：

你应该关闭你的<p>-tags

github.com/philipwalton/…

我不是说这是一个解决方案，但是 1.) 你真的应该关闭你的 <p> 标签（正如 jmattheis 已经写的那样）和 2.) 你可能想在最后一个属性之后添加分号在section 和aside。

虽然我同意从一致性的角度关闭 P 标签 - 它不是必需的：***.com/questions/8460993/…

我能给你的最好建议是使用完整的速记声明...而不是flex: 1; 使用flex: 1 0 auto;

【参考方案1】：

根据Flexbugs：

在 IE 10-11 中，弹性容器上的 min-height 声明可用于确定容器本身的大小，但它们的弹性项目子项似乎不知道其父项的大小。他们表现得好像根本没有设置高度一样。

这里有几个解决方法：

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

html 
  height: 100%;


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


header,
footer 
  background: #7092bf;


main 
  min-height: 0; /* added 2021*/
  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>

【参考方案2】：

有关 IE11 Flexbox 错误的完整列表及更多信息，请参阅“我可以使用”

IE11 和其他浏览器中存在大量 Flexbox 错误 - 请参阅 flexbox on Can I Use -> 已知问题，其中以下列出在 IE11 下：

IE 11 要求将一个单元添加到第三个参数，即 flex-basis 属性 在 IE10 和 IE11 中，如果容器具有 min-height 但没有明确的 height 属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其伸缩子项的大小 使用min-height 时，IE 11 无法正确垂直对齐项目

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

【参考方案3】：

我已经使用 flexbox 测试了一个完整的布局，它包含页眉、页脚、带有左、中和右面板的主体，并且面板可以包含菜单项或页脚和应该滚动的页眉。很复杂

IE11 甚至 IE EDGE 在显示 flex 内容时存在一些问题，但可以克服。我已经在大多数浏览器中测试过了，它似乎可以工作。

我已修复的一些问题是 IE11 高度错误，将 height:100vh 和 min-height: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 容器： 溢出：隐藏在主弹性容器上。如果您移除溢出，IE EDGE 会将内容推出视口，而不是将其包含在 flex 主容器中。

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

您可以在我的codepen 页面上查看我的测试和示例。 我用我已应用的修复程序评论了重要的 css 部分，希望有人觉得它有用。