gpt4 book ai didi

html - 列 flex 重叠后的 IE 11 元素

转载 作者:行者123 更新时间:2023-12-04 09:11:47 27 4
gpt4 key购买 nike

我试图了解在 IE 11 上哪里出了问题。

我的页脚与页面的主要内容重叠,主要内容没有固定高度,因为填充它的元素可能不同。这在 chrome 上看起来不错,但在 IE 11 上重叠。这是一个片段和一个 jsbin link.

<!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;

关于html - 列 flex 重叠后的 IE 11 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63336998/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com