Flexbox在Internet Explorer 11中不起作用
这段代码在火狐、Chrome和Edge中运行良好，但显然由于flex模型的原因，它在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>
回答 3
Stack Overflow用户
发布于 2016-06-20 05:53:37
根据Flexbugs的说法
在IE 10-11中，flex容器上的
min-height声明可以调整容器本身的大小，但它们的flex项的子项似乎不知道父项的大小。它们的行为就好像根本没有设置高度一样。
以下是几个变通方法：
1.始终填充视口+可滚动的<aside> <section>**:** viewport
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>
Stack Overflow用户
发布于 2016-11-15 05:33:17
有关IE11 Flexbox错误的完整列表和更多信息，请参阅“我可以使用吗
IE11和其他浏览器中存在大量Flexbox错误-请参阅flexbox on Can I Use ->已知问题，其中IE11下列出了以下内容：
- IE 11要求将一个单位添加到第三个参数IE10和IE11中的flex-basis属性
- ，如果容器具有
min-height但没有显式height属性
H110IE 11在使用D11时无法正确地垂直对齐项目H212，则具有display: flex和flex-direction: column的容器将无法正确计算其挠性子对象的大小。
另请参阅Philip Walton的Flexbugs问题和变通方法列表。
Stack Overflow用户
发布于 2017-03-08 19:33:16
我已经使用flexbox测试了一个完整的布局，它包含页眉、页脚、具有左、中、右面板的主体，面板可以包含菜单项或页脚以及应该滚动的页眉。相当复杂
IE11甚至IE EDGE都有一些显示flex内容的问题，但这是可以克服的。我已经在大多数浏览器上测试过了，它似乎可以工作。
这也有助于不必在dom中的容器上设置高度。还要使body/html成为flex容器。否则，IE11将压缩视图。
html,body {
display: flex;
flex-flow:column nowrap;
height:100vh; /* fix IE11 */
min-height:100%; /* fix IE11 */
}main{
flex:1 1 auto;
overflow:hidden; /* IE EDGE overflow fix */
}
您可以在我的codepen页面上看到我的测试和示例。我注释了重要的css部分，并应用了我的修复程序，希望有人能发现它的用处。
https://stackoverflow.com/questions/37905749
复制相似问题