Question

我知道有类似的问题，但我已经尝试了所有的建议，仍然无法让它发挥作用。我正在使用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中运行？

Answer 1

您可以执行以下两项操作，使其呈现相同的跨浏览器：

在使用flex 列方向时，IE有一个min-height bug，将display: flex添加到其父级（section）解决了
< / LI>
IE也有some issues when it comes to auto margins，因此margin-top: auto项上的.col-md-4代替align-items: flex-end，请在父级row d-flex fHeight上使用.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; } */

Updated fiddle

Stack snippet

＆＃13;

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

＆＃13;

WaitForText              <Target>               <value>

＆＃13;

Answer 2

我正在将Bootstrap 4类.d-flex与min-height: 350px;一起使用，它们在IE11中的容器没有间距/高度问题。通过在flex容器中增加高度来固定。

尝试增加高度

height: 350px;

Answer 3

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

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

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

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

使flexbox在IE11中工作

3 个答案: