在IE11中使用Flexbox布局

Question

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

我的布局如下：

.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中工作？

- katie hudson

---

我在IE和Chrome中运行它，效果相同 https://www.screencast.com/t/IK6mgEbk 请参阅截屏 - LOTUSMS

从你的截图来看，你正在以平板电脑视图显示它。如果你增加浏览器的宽度，图片应该在同一行上，而不是堆叠在一起。谢谢。 - katie hudson

顺便说一下，你应该在问题中指明这一点，但不管怎样，这里是IE浏览器的全屏截图：https://www.screencast.com/t/UZblTMhTB6 - LOTUSMS

这肯定对你的显示有问题。两个图像应该并排而不是叠在一起。 - katie hudson

Answer 1

你可以做这两件事情来使其在各个浏览器上呈现相同的效果：

• 使用flex column方向时，IE存在min-height bug问题，将display: flex添加到其父级元素（section）即可解决。

• 对于.col-md-4项目，IE在自动边距方面也存在一些问题，因此在父级元素（row d-flex fHeight）上使用align-items: flex-end代替margin-top: auto。

更新的fiddle

堆栈片段

.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://istack.dev59.com/V5BcV.webp" 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>

- Asons

Answer 2

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

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

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

这个与@Ason的两个选项结合使用

- Lance

Answer 3

我在使用Bootstrap 4类.d-flex和min-height: 350px;，在IE11的容器上没有间距/高度问题。通过为flex容器添加高度进行修复。 尝试添加高度

height: 350px;

- Deepak Rajpal