小编J. *_*Doe的帖子

Flexbox无法在Internet Explorer 11中运行

这段代码在Firefox,Chrome和Edge中运行良好,但由于flex模型,它在IE11中无法正常工作.我该如何解决？

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

html css internet-explorer css3 flexbox

J. *_*Doe

2016 06-19

26
推荐指数

3
解决办法

9万
查看次数