[英]Flexbox not working in Internet Explorer 11
This piece of code works fine in Firefox, Chrome and Edge, but it does not work properly in IE11 because of flex model, apparently.这段代码在 Firefox、Chrome 和 Edge 中运行良好,但显然由于 flex 模型在 IE11 中无法正常运行。 How can I fix it?
我该如何解决?
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>
According to Flexbugs :根据Flexbugs :
In IE 10-11,
min-height
declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents.在 IE 10-11 中,flex 容器上的
min-height
声明用于调整容器本身的大小,但它们的 flex item 子项似乎不知道其父项的大小。 They act as if no height has been set at all.它们就好像根本没有设置高度一样。
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 { 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. 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>
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 下列出了以下内容:
display: flex
and flex-direction: column
will not properly calculate their flexed childrens' sizes if the container has min-height
but no explicit height
propertymin-height
但没有明确的height
属性,则具有display: flex
和flex-direction: column
的容器将无法正确计算其弯曲子项的大小min-height
is usedmin-height
时,IE 11 无法正确垂直对齐项目Also see Philip Walton's Flexbugs list of issues and workarounds.另请参阅 Philip Walton 的Flexbugs问题和解决方法列表。
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.我已经使用 flexbox 测试了一个完整的布局,它包含页眉、页脚、带有左侧、中间和右侧面板的主体,面板可以包含菜单项或页脚和应该滚动的页眉。 Pretty complex
相当复杂
IE11 and even IE EDGE have some problems displaying the flex content but it can be overcome. IE11 甚至 IE EDGE 在显示 flex 内容时都有一些问题,但可以克服。 I have tested it in most browsers and it seems to work.
我已经在大多数浏览器中测试过它,它似乎有效。
Some fixed i have applies are IE11 height bug, Adding height:100vh and min-height:100% to the html/body.我应用的一些修复是 IE11 高度错误,将 height:100vh 和 min-height:100% 添加到 html/body。 this also helps to not have to set height on container in the dom.
这也有助于不必在 dom 中设置容器的高度。 Also make the body/html a flex container.
还要使 body/html 成为一个 flex 容器。 Otherwise IE11 will compress the view.
否则 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.修复了 IE EDGE 溢出 flex 容器的问题: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 主容器内。
main{
flex:1 1 auto;
overflow:hidden; /* IE EDGE overflow fix */
}
You can see my testing and example on my codepen page.您可以在我的codepen页面上查看我的测试和示例。 I remarked the important css parts with the fixes i have applied and hope someone finds it useful.
我用我应用的修复程序评论了重要的 css 部分,希望有人觉得它有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.