Flexbox不能在Internet Explorer 11中使用 [英] Flexbox not working in Internet Explorer 11

问题描述

这段代码在Firefox，Chrome和Edge中运行良好，但是由于flex模型的原因，它在IE11中无法正常工作。我怎样才能解决它？

这是它在Firefox中的样子

$ b

body * {box-sizing：border-box;} html {height：100％;} body {min-height：100％;显示：flex; flex-flow：column; margin：0;} main {flex：1;显示：flex;}标题，页脚{背景：＃7092BF;边框：坚实; width：100％;} section {border：solid;背景：＃9AD9EA; flex：1} {{border：solid;宽度：150px;背景：＃3E48CC}

< header> < p为H.报头LT; /报头><主> <一旁> < p>旁边< p>旁边< / aside> <节> < p>内容< p>内容< p>内容< p>内容< / section>< / main>< footer> < p>页脚< p>页脚< /页脚>

解决方案

这可能与 min-height bug ，试试这个：



更改 body {min-height：100％; } 到 body {height：100％;如果你有很长的内容，需要滚动，请添加：


b

  section {overflow：auto; } 
  

jsFiddle



body * { box-sizing：border-box;} html {height：100％;} body {/ * min-height：100％; * /身高：100％; / *添加* / display：flex; flex-flow：column; margin：0;} main {flex：1;显示：flex;}标题，页脚{背景：＃7092BF;边框：坚实; width：100％;} section {overflow：auto; / *添加* /边框：固体;背景：＃9AD9EA; flex：1} {{border：solid;宽度：150px;背景：＃3E48CC}

< header> < p为H.报头LT; /报头><主> <一旁> < p>旁边< p>旁边< / aside> <节>内容< p>内容< p>内容< p内容< p>内容< p>内容< p < p>内容< p>内容< p>内容< p>内容< / section>< / main>< footer> < p>页脚< p>页脚< /页脚>

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?

This is how it looks in Firefox

This is how it looks in 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>

解决方案

It is likely related to the min-height bug on IE11, try this:

Change body { min-height: 100%; } to body { height: 100%; }

And if your have large length of content and need to scroll, add this:

section { overflow: auto; }

jsFiddle

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  /* min-height: 100%; */
  height: 100%; /*added*/
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  overflow: auto; /*added*/
  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
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

这篇关于Flexbox不能在Internet Explorer 11中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！