twitter-bootstrap 使 flexbox 在 IE11 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47137289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making flexbox work in IE11
提问by katie hudson
I know there are similar questions about, but I have tried all of the suggestions and still cant get it working. I am using Bootstrap, and I have a section that is 100vh in height. Within this section I have two rows, the second row I needed placing at the very bottom of the section, but did not want to use absolute positioning. As such, I used the flex system.
我知道有类似的问题，但我已经尝试了所有建议，但仍然无法正常工作。我正在使用 Bootstrap，我有一个高度为 100vh 的部分。在本节中，我有两行，第二行我需要放置在该节的最底部，但不想使用绝对定位。因此，我使用了 flex 系统。
My layout was like so
我的布局是这样的
.mn120 {
min-height: 120px;
}
img {
max-width: 40%;
}
.mh100vh {
min-height: 900px;
}
.col-md-4 {
margin-top: auto;
}<section id="someSection" class="section">
<div class="container d-flex flex-column justify-content-between fHeight mh100vh">
<div class="row">
<div class="col-md-8 offset-2">
<h2 class="section-title">Header Text</h2>
<p class="section-subtitle">
Some Text
</p>
</div>
</div>
<div class="row d-flex fHeight">
<div class="col-md-4">
<img class="btmImg" src="data:image/png;base64,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" alt="" />
</div>
<div class="col-md-8">
<img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
</div>
</div>
</div>
</section>I made use of a lot of Bootstrap classes to help me achieve this layout. To demonstrate the issue, I have changed the height of the section to 900px rather than 100vh
我使用了很多 Bootstrap 类来帮助我实现这种布局。为了演示这个问题，我将部分的高度改为 900px 而不是 100vh
So, if you view this JSFiddlein something like chrome, you will see that the image row sits at the bottom of the section. However, if you view it in IE11, you will see that the image row does not sit at the bottom of the section.
因此，如果您以 chrome 之类的方式查看此JSFiddle，您将看到图像行位于该部分的底部。但是，如果您在 IE11 中查看它，您将看到图像行并未位于该部分的底部。
Is there any way to make this layout work within IE11?
有没有办法让这个布局在 IE11 中工作？
回答by Ason
You can do these 2 things to make it render the same cross browsers:
您可以执行以下 2 件事以使其呈现相同的跨浏览器：
IE has a
min-heightbugwhen using flex columndirection, addingdisplay: flexto its parent (section) solves thatIE also have some issues when it comes to auto margins, so instead of
margin-top: autoon the.col-md-4item, usealign-items: flex-endon the parent (row d-flex fHeight)
IE在使用 flex列方向时有一个
min-height错误，添加到它的父级 ( ) 解决了这个问题display: flexsectionIE在自动边距方面也有一些问题，因此不要
margin-top: auto在.col-md-4项目上使用，而是align-items: flex-end在父级 (row d-flex fHeight) 上使用
Stack snippet
堆栈片段
.section {
display: flex; /* added */
}
.row.d-flex.fHeight {
align-items: flex-end; /* added */
}
.mn120 {
min-height: 120px;
}
img {
max-width: 40%;
}
.mh100vh {
min-height: 900px;
}
/*
.col-md-4 {
margin-top:auto;
}
*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="someSection" class="section">
<div class="container d-flex flex-column justify-content-between fHeight mh100vh">
<div class="row">
<div class="col-md-8 offset-2">
<h2 class="section-title">Header Text</h2>
<p class="section-subtitle">
Some Text
</p>
</div>
</div>
<div class="row d-flex fHeight">
<div class="col-md-4">
<img class="btmImg" src="https://i.stack.imgur.com/V5BcV.png" alt="" />
</div>
<div class="col-md-8">
<img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
</div>
</div>
</div>
</section>回答by Deepak Rajpal
I was using Bootstrap 4 class .d-flexwith min-height: 350px;which have no-spacing/height issue for container in IE11. Fixed by adding height to the flex container.
我正在使用 Bootstrap 4 类.d-flex，min-height: 350px;其中 IE11 中的容器没有间距/高度问题。通过向 flex 容器添加高度来修复。
Try adding height
尝试增加高度
height: 350px;
