0

I have made a section with cards it works well on firefox chrome ie microsoft edge but it breaks on ie 11 on mozilla I get this result and on ie11 I get this result on ie 11 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>

Someone know why I have this pb on ie11 ?

sonia maklouf
  • 2,713
  • 4
  • 18
  • 28

1 Answers1

0
  • Remove utility class d-flex from element with class .card-img-overlay
  • Remove utility class img-fluid from img element, you may create a new class and give it width:100% and height:100%

Note you are missing class .container as a parent which causing horizontal scrollbar to show.

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Thanks @dippas for your answer but is there any reason to remove utility class d-flex since the pb in ie11 is resolved by the remove of img-fluid ? – sonia maklouf Apr 16 '17 at 06:08
  • Well I started by debugging with`d-flex` which fixed something in IE11, I don't recall what at the moment, then I went to the debug the other issue I had..which I found out was `img-fluid`, that's why I said that in my answer – dippas Apr 16 '17 at 06:12