Question

我已经制作了一个带有卡片的部分，它在firefox chrome上运行良好，即微软边缘，但它打破了即11 在mozilla上我得到了这个结果在ie11我得到了这个结果 codepen link

＆＃13;

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

＆＃13;

有人知道我为什么在ie11上有这个pb？

Answer 1

从包含类d-flex

.card-img-overlay

从img-fluid元素中删除实用程序类img，您可以创建一个新类并为其提供width:100%和height:100%

注意您错过了班级.container作为父级，导致水平滚动条显示。

＆＃13;

img {width:100%; height:100%}

＆＃13;

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

＆＃13;

ie11上的bootstrap img卡打破

1 个答案: