在ie11上引导img卡中断

Question

我用卡片做了一个章节，它在firefox chrome ie微软边缘上工作得很好，但是它破坏了ie 11在mozilla上，我得到了这个结果

在ie11上我得到了这个结果

代码链接

​

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

Answer 1

• 用类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>

​