【发布时间】：2019-02-07 15:50:22
【问题描述】：
我有以下代码：
https://codesandbox.io/s/yv983q28xx
来源：
<html>
<head>
<title>Testing on IE 11</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #d6ffbb;
}
.page-container {
padding: 10px;
}
footer {
text-align: justify;
font-family: Arial;
font-size: 14px;
letter-spacing: normal;
padding: 20px;
color: #fff;
background: url("https://i.ibb.co/hYXDL2N/pattern-dark.jpg") top center
repeat;
}
/* BEGIN OF CODE BLOCK FOR STICKY FOOTER */
body {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.page-container {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
/* END OF CODE BLOCK FOR STICKY FOOTER */
</style>
</head>
<body>
<div class="page-container">
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
hello world<br />
</div>
<footer>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</footer>
</body>
</html>
演示： https://yv983q28xx.codesandbox.io/
此代码适用于：{ Chrome, Firefox, Edge }。
但是在IE11 上运行时，我得到以下行为：
滚动到顶部：
滚动到底部（只画到上一张图片的结尾）：
如您所见，当滚动到底部时，div 背景并未绘制整个 div。
重要提示：这是一个sticky-footer 实现，因此要求当您缩小页脚时，请固定在screen / viewport 的底部。
知道如何在IE11 上解决这个问题而不影响其他浏览器吗？
如果可能，请分叉 codesandbox.io 并将您的解决方案的链接粘贴到此处。
谢谢！
【问题讨论】：
-
单看图和代码，好像和你的身高设置为100%有关。在这种情况下你需要那个吗？
-
是的，我愿意。如果我删除：
height: 100%;用于正文，那么当您缩小页脚时，页脚将不会粘在窗口/视口的底部。 -
问题出在 IE 和 flexbox 上。如果你真的想拥有 IE11 的兼容性（不知道为什么），那么你应该找到 flexbox 的替代品。这只是 IE11 使用 flexbox 时可能出现的众多错误之一。在这里阅读更多caniuse.com/#search=flexbox，也许你可以在这里找到你的解决方案github.com/philipwalton/flexbugs