Question

我在IE上遇到了一些问题。但我认为在这种情况下，图片胜过千言万语：

Chrome，Firefox＆amp;预期结果： enter image description here

IE 11

为什么IE不像我期望的那样呈现它？那么解决这个问题可以做些什么呢？

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>的内容。

Answer 2

浏览器样式表中display:block的{{1}} {IE>缺少所有IE。

通过CSS添加“手动”，一切都很好：

main

http://jsfiddle.net/edrpuLtk/4/

IE忽略背景，填充和最小高度

2 个答案: