css - Bootstrap img 卡在 ie11 上中断

Question

我用卡片做了一个部分，它在 firefox chrome 上运行良好，即 microsoft edge，但它在 ie 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 吗？

Answer 1

• 从类 .card-img-overlay 的元素中删除实用程序类 d-flex
• 从 img 元素中删除实用类 img-fluid，您可以创建一个新类并为其指定 width:100% 和 高度: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>