Html Flexbox 在 Internet Explorer 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37905749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not working in Internet Explorer 11
提问by J. Doe
This piece of code works fine in Firefox, Chrome and Edge, but it does not work properly in IE11 because of flex model, apparently. How can I fix it?
这段代码在 Firefox、Chrome 和 Edge 中运行良好，但显然由于 flex 模型在 IE11 中无法正常运行。我该如何解决？
This is how it looks in Firefox
这是它在 Firefox 中的样子
This is how it looks in IE11
这是它在 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>回答by Stickers
According to Flexbugs:
根据Flexbugs：
In IE 10-11,
min-heightdeclarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
在 IE 10-11 中，
min-height对 flex 容器的声明用于调整容器本身的大小，但它们的 flex item 子项似乎不知道其父项的大小。它们就好像根本没有设置高度一样。
Here are a couple of workarounds:
这里有几个解决方法：
1. Always fill the viewport + scrollable <aside>and <section>:
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. Fill the viewport initially + normal page scroll with more content:
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>回答by Dave Everitt
See "Can I Use" for the full list of IE11 Flexbox bugs and more
有关 IE11 Flexbox 错误的完整列表等，请参阅“我可以使用吗”
There are numerous Flexbox bugs in IE11 and other browsers - see flexbox on Can I Use-> Known Issues, where the following are listed under IE11:
IE11 和其他浏览器中存在大量 Flexbox 错误 - 请参阅Can I Use-> 已知问题上的 flexbox，其中在 IE11 下列出了以下内容：
- IE 11 requires a unit to be added to the third argument, the flex-basis property
- In IE10 and IE11, containers with
display: flexandflex-direction: columnwill not properly calculate their flexed childrens' sizes if the container hasmin-heightbut no explicitheightproperty - IE 11 does not vertically align items correctly when
min-heightis used
- IE 11 需要将一个单位添加到第三个参数中，即 flex-basis 属性
- 在 IE10 和 IE11 中，如果容器具有但没有明确的属性，则具有
display: flex和 的容器flex-direction: column将无法正确计算其弯曲子项的大小min-heightheight - IE 11也当不是垂直正确对齐项
min-height被用于
Also see Philip Walton's Flexbugslist of issues and workarounds.
另请参阅 Philip Walton 的Flexbugs问题和解决方法列表。
回答by Plippie
I have tested a full layout using flexbox it contains header, footer, main body with left, center and right panels and the panels can contain menu items or footer and headers that should scroll. Pretty complex
我已经使用 flexbox 测试了一个完整的布局，它包含页眉、页脚、带有左侧、中间和右侧面板的主体，面板可以包含菜单项或页脚和应该滚动的页眉。相当复杂
IE11 and even IE EDGE have some problems displaying the flex content but it can be overcome. I have tested it in most browsers and it seems to work.
IE11 甚至 IE EDGE 在显示 flex 内容时都有一些问题，但可以克服。我已经在大多数浏览器中测试过它，它似乎有效。
Some fixed i have applies are IE11 height bug, Adding height:100vh and min-height:100% to the html/body. this also helps to not have to set height on container in the dom. Also make the body/html a flex container. Otherwise IE11 will compress the view.
我应用的一些修复是 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 */
}
A fix for IE EDGE that overflows the flex container: overflow:hidden on main flex container. if you remove the overflow, IE EDGE wil push the content out of the viewport instead of containing it inside the flex main container.
修复了 IE EDGE 溢出 flex 容器的问题：overflow:hidden on main flex container。如果删除溢出，IE EDGE 会将内容推出视口，而不是将其包含在 flex 主容器内。
main{
flex:1 1 auto;
overflow:hidden; /* IE EDGE overflow fix */
}
You can see my testing and example on my codepenpage. I remarked the important css parts with the fixes i have applied and hope someone finds it useful.
您可以在我的codepen页面上查看我的测试和示例。我用我应用的修复程序评论了重要的 css 部分，希望有人觉得它有用。
