引導IMG卡上破IE11

Question

我與卡部分它運作良好，在Firefox鉻即微軟邊緣，但Mozilla的突破上，即11 我得到這樣的結果 和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

• 刪除工具類，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>