让 flexbox 在 IE11 中工作答案

【问题标题】：Making flexbox work in IE11让 flexbox 在 IE11 中工作
【发布时间】：2018-04-18 15:16:22
【问题描述】：

我知道有类似的问题，但我已经尝试了所有建议，但仍然无法正常工作。我正在使用 Bootstrap，并且我有一个高度为 100vh 的部分。在这个部分中，我有两行，第二行我需要放置在该部分的最底部，但不想使用绝对定位。因此，我使用了 flex 系统。

我的布局是这样的

.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>

我使用了很多 Bootstrap 类来帮助我实现这种布局。为了演示这个问题，我将部分的高度更改为 900px 而不是 100vh

因此，如果您在 chrome 中查看此 JSFiddle，您将看到图像行位于该部分的底部。但是，如果您在 IE11 中查看它，您会看到图像行不在该部分的底部。

有没有办法让这个布局在 IE11 中工作？

【问题讨论】：

我在IE和Chrome中运行，效果一样screencast.com/t/IK6mgEbk看截图
从您的屏幕截图看起来，您正在平板电脑视图中显示它。如果增加浏览器的宽度，图像应该在同一行，而不是堆叠。谢谢
顺便说一句，你应该在你的问题中指定这一点，但无论哪种方式，这里都是 IE 中的全屏截图screencast.com/t/UZblTMhTB6
那绝对不能正确显示给你。两张图片应该彼此相邻，而不是堆叠。

标签： twitter-bootstrap css flexbox internet-explorer-11

【解决方案1】：

你可以做这 2 件事来让它呈现相同的跨浏览器：

IE 在使用 flex column 方向时有一个 min-height bug，将 display: flex 添加到其父级 (section) 即可解决此问题
IE 也有some issues when it comes to auto margins，因此在.col-md-4 项目上使用margin-top: auto 代替align-items: flex-end 在父项上使用align-items: flex-end (row d-flex fHeight)

Updated fiddle

堆栈sn-p

.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>

【讨论】：

【解决方案2】：

我使用 Bootstrap 4 类 .d-flex 和 min-height: 350px;，在 IE11 中容器没有间距/高度问题。通过向 flex 容器添加高度来修复。

尝试增加高度

height: 350px;

【讨论】：

【解决方案3】：

除此之外。我建议使用您自己的 .d-flex 类。

我已经实现了这个 sass 脚本：https://gist.github.com/richardtorres314/26b18e12958ba418bb37993fdcbfc1bd

.d-flex-new {
  @include flexbox();
  width: 100%;
}

这与@Ason 的两个选项相结合

【讨论】：