我正在努力了解IE 11上哪里出了问题。
我的页脚与页面的主要内容重叠，其中的主要内容没有固定的高度，因为填充它的项目可能不同。这在chrome上看起来很棒，但在IE 11上有重叠。这里有一个片段和一个jsbin链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
html,
body {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.navbar {
margin-bottom: 15px !important;
position: relative;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after {
content: " ";
display: table;
}
.navbar-header {
float: left;
}
#masthead .navbar-header .logo {
width: 266px;
height: 70px;
display: block;
}
#footer {
background-color: antiquewhite;
}
.breadcrumbs {
list-style-type: none;
vertical-align: top;
}
</style>
</head>
<body role="document" class="d-flex flex-column">
<nav id="masthead" class="navbar navbar-default" role="banner">
<div class="navbar-header">
<a class="logo">stuff here ....</a>
</div>
</nav>
<div class="container-fluid flex-fill w-100 pb-3 border border-primary">
<div class="d-flex flex-column">
<div class="breadcrumbs">
whatevs...
</div>
<div class="row">
<div class="col-xs-12 col-md-8 d-flex flex-column">
<div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
<h1 class="m-0 mt-1 font-size-24px">Hello</h1>
<div class="d-flex flex-column flex-md-row">
<div class="flex-fill font-size-14px font-size-sm-16px">
<span>there</span>
<span class="ml-2">general kenobi</span>
</div>
</div>
</div>
<div class="mt-2 mt-md-0">
something here
and another thing here
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
did we forget about this?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
<div class="col-xs-12 col-md-4 pr-md-0">
SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container-fluid mw-100">
<ul>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
</ul>
</div>
</footer>
</body>
</html>正在寻找解决方案，并希望了解一些文档，希望能够在未来帮助其他人解决类似问题。非常感谢。
查看此代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
html,
body {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.navbar {
margin-bottom: 15px !important;
position: relative;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after {
content: " ";
display: table;
}
.navbar-header {
float: left;
}
#masthead .navbar-header .logo {
width: 266px;
height: 70px;
display: block;
}
#footer {
background-color: antiquewhite;
}
.breadcrumbs {
list-style-type: none;
vertical-align: top;
}
</style>
</head>
<body role="document" class="d-flex flex-column">
<nav id="masthead" class="navbar navbar-default" role="banner">
<div class="navbar-header">
<a class="logo">stuff here ....</a>
</div>
</nav>
<div class="container-fluid flex-fill w-100 pb-3 border border-primary">
<div class="d-flex flex-column">
<div class="breadcrumbs">
whatevs...
</div>
<div class="row">
<div class="col-xs-12 col-md-8 d-flex flex-column">
<div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
<h1 class="m-0 mt-1 font-size-24px">Hello</h1>
<div class="d-flex flex-column flex-md-row">
<div class="flex-fill font-size-14px font-size-sm-16px">
<span>there</span>
<span class="ml-2">general kenobi</span>
</div>
</div>
</div>
<div class="mt-2 mt-md-0">
something here
and another thing here
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
did we forget about this?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
<div class="col-xs-12 col-md-4 pr-md-0">
SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container-fluid mw-100 row">
<ul>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
</ul>
</div>
</footer>
</body>
</html>您需要从正文样式中删除height: 100% !important;。
在将flex行布局更改为基于列的flex容器的教程中，您应该添加类d-flex, flex-column, my-flex-container-column。
您的解决方案只有
<body role="document" class="d-flex flex-column">
所以，改为
class="d-flex flex-column my-flex-container-column"
阅读教程很好
!important应该很少使用，并且只有在覆盖现有css属性时才使用。在两种分辨率上都进行了测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
html,
body {
width:100%;
height:100%;
margin: 0;
padding: 0;
border: 0;
}
.navbar {
margin-bottom: 15px;
position: relative;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after {
content: " ";
display: table;
}
.navbar-header {
float: left;
}
#masthead .navbar-header .logo {
width: 266px;
height: 70px;
display: block;
}
#footer {
background-color: antiquewhite;
}
.breadcrumbs {
list-style-type: none;
vertical-align: top;
}
</style>
</head>
<body role="document" class="d-flex flex-column my-flex-container-column">
<nav id="masthead" class="navbar navbar-default" role="banner">
<div class="navbar-header">
<a class="logo">stuff here ....</a>
</div>
</nav>
<div class="container-fluid flex-fill w-100 pb-3 border border-primary">
<div class="d-flex flex-column">
<div class="breadcrumbs">
whatevs...
</div>
<div class="row">
<div class="col-xs-12 col-md-8 d-flex flex-column">
<div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
<h1 class="m-0 mt-1 font-size-24px">Hello</h1>
<div class="d-flex flex-column flex-md-row">
<div class="flex-fill font-size-14px font-size-sm-16px">
<span>there</span>
<span class="ml-2">general kenobi</span>
</div>
</div>
</div>
<div class="mt-2 mt-md-0">
something here
and another thing here
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
did we forget about this?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
<div class="col-xs-12 col-md-4 pr-md-0">
SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
ipsam sapiente dolorum tenetur vel distinctio.
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container-fluid mw-100">
<ul>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
<li>ABout us</li>
</ul>
</div>
</footer>
</body>
</html>