我用卡做了一个部分，它在Firefox chrome上很好用，即Microsoft Edge，但是在11上坏了
在Mozilla上我得到了这个结果
在ie11上我得到了这个结果
codepen link
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<section class="image2">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
有人知道为什么我在ie11上有这个pb吗？
最佳答案
从具有类d-flex的元素中删除实用程序类.card-img-overlay
从img-fluid元素中删除实用程序类img，您可以创建一个新类并将其赋予width:100%和height:100%
请注意，您缺少作为父类的类.container，这导致水平滚动条显示。
img {width:100%; height:100%}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<section class="image2 container">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>关于css - 引导镜像卡在ie11上断开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43421983/