html - Internet Explorer 的 Flexbox 布局问题

Question

使用此样式指南：Materialize CSS，我的页面布局如下：

<header>
<main>
<footer>

根据这篇文章，我将以下 CSS 用于“粘性页脚”

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

除 Internet Explorer 之外的所有浏览器都可以正常显示网页。

我究竟做错了什么？

Answer 1

IE11 之前的 IE 版本不支持 Flexbox 作为标准：http: //caniuse.com/#search=flex

但是，您可以添加-ms-前缀以获得对 IE10 的支持。您的代码如下：

body {
  display: -ms-flex;
  display: flex;
  min-height: 100vh;
  -ms-flex-direction: column;
  flex-direction: column;
}
main {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}