html - IE 忽略背景、填充和最小高度

Question

我在使用 IE 时遇到了一些问题。但我认为在这种情况下图片值一千字:

Chrome、Firefox 和预期结果:

IE 11

为什么 IE 没有像我期望的那样显示它？可以做些什么来解决这个问题？

http://jsfiddle.net/edrpuLtk/3/

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}
html, body {
    text-align: center;
    margin: 0;
    padding: 0;
}
body, header {
    background: #FFFF33;
    background-image: url(../bg1.jpg);
    background-repeat: repeat-y;
    background-size: 30%;
    background-position: right top;
}
header, main {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}
header {
    height: 136px;
    width: 100%;
    position: fixed;
}
main {
    min-height: calc(100vh - (136px + 80px));
    /* 100% minus (height of header plus height of footer) */
    background-color: rgba(254, 254, 254, 0.33);
    overflow: hidden;
    padding-top: 136px;
}
footer {
    width: 100%;
    height: 80px;
}
#content {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}

html

<header>
    <p>some text</p>
</header>
<main>
    <div id="content">
         <h1>Headline</h1>
        <p>line 1</p>
        ...
    </div>
</main>
<footer>footer</footer>

Answer 1

从评论延伸:

根据 caniuse , IE 仍然不支持 <main>元素，所以你可能想使用类似 <div> 的东西相反。