我如何修复 IE 图像和列 flexbox 错误？

Question

我使用 bootstrap4 css 制作了一个可调整大小的模板。在除 IE 11.0 以外的所有浏览器中均正常。

确保 .d-flex class 不能正常工作（我用它来使我所有的列高度相同）。谷歌搜索解决方案没有取得进展。如果我删除这个 class ，除了列的高度相同之外，一切似乎都可以。

但最有趣的事情发生在图像上——它们在 ie 中确实以全尺寸显示。还从这里尝试了不同的修复 - Bootstrap Image Responsive messed up on IE 但没有运气。我可以在没有 .d-flex 的情况下将图像放入容器中，但无论如何图像和文本下方有很多可点击的白色 space。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title 1 here</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
        <div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
          <a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt=""></a>
          </div>
        <div class="brd_black col-8 bg-white vertical-align">
        <h4>Title 1 here</h4></div>
      </div>
<!-- 2nd row -->
      <div class="row mt-4">
      <div class="brd_black align-self-center col">&nbsp;</div>
      <div class="brd_black align-self-center col-10">
         <div class="row">
        <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
  <h4 class="text-dark">Title 2 here:</h4>
  <div class="alert alert-warning font-weight-bold" role="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo. Pellentesque at feugiat libero, non tincidunt est. Ut velit sapien, dictum eu lorem eget, interdum faucibus libero. Nam lobortis varius sem at cursus.</div>
<!-- 0d -->
<div class="row mt-4">
  <div class="col-sm-4 d-flex align-items-stretch">
    <div class="card">
      <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt=""></a>
      <div class="card-body">
        <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
        <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Nunc imperdiet dignissim maximus. <br />
        <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
         <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
         <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 8 ch.<br>
        </p>
        <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
      </div>
    </div>
  </div>
    <div class="col-sm-4 d-flex align-items-stretch">
    <div class="card">
      <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
        <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse et eleifend sem. <br />
        <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
         <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
         <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 75 ch.<br>(30 ch. оch.ого обуch.ния)
        </p>
        <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 d-flex align-items-stretch">
    <div class="card">
      <a href="https://google.com" target="_blank"><img class="card-img-top"src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">РLorem ipsum dolor sit amet, consectetur</h5>
        <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse potenti. Integer vel ex id lectus ultrices scelerisque. Dsdfccvds.<br />
        <span class="text-info font-weight-bold">О Nunc purus:</span> Praesent ut orci sed velit sagittis finibus at vel odio. Curabitur posuere a dolor eget commodo. In hac habitasse platea dictumst.<br />
         <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
         <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 15,4 ch.<br>
        </p>
        <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
      </div>
    </div>
  </div>
</div>
 <!-- /0d -->
</div>
<div class="brd_black align-top col-6">
<!-- Corusel -->
  <!-- below corusel -->
<!-- /Corusel -->
          </div>
           </div>
        </div>
      <div class="brd_black align-self-center col">&nbsp;</div>
      </div>
   </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  </body>
</html>

Answer 1

以访客身份从 IE11 回答。 (G-CYR)

.card {
  max-width: 99.99%;/* cure the image width going nuts */
}


.card * {
  flex: 0 0 auto;/* avoids those extra large empty gaps */
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title 1 here</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
      <div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
        <a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt=""></a>
      </div>
      <div class="brd_black col-8 bg-white vertical-align">
        <h4>Title 1 here</h4>
      </div>
    </div>
    <!-- 2nd row -->
    <div class="row mt-4">
      <div class="brd_black align-self-center col">&nbsp;</div>
      <div class="brd_black align-self-center col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
            <h4 class="text-dark">Title 2 here:</h4>
            <div class="alert alert-warning font-weight-bold" role="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo. Pellentesque at feugiat libero, non tincidunt est. Ut velit sapien, dictum eu lorem eget, interdum faucibus libero. Nam
              lobortis varius sem at cursus.</div>
            <!-- 0d -->
            <div class="row mt-4">
              <div class="col-sm-4 d-flex align-items-stretch">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt=""></a>
                  <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Nunc imperdiet dignissim maximus. <br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 8 ch.<br>
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 d-flex align-items-stretch">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
                  <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse et eleifend sem. <br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 75 ch.<br>(30 ch. оch.ого обуch.ния)
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 d-flex align-items-stretch">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
                  <div class="card-body">
                    <h5 class="card-title">РLorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse potenti. Integer vel ex id lectus ultrices scelerisque. Dsdfccvds.<br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Praesent ut orci sed velit sagittis finibus at vel odio. Curabitur posuere a dolor eget commodo. In hac habitasse platea dictumst.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 15,4 ch.<br>
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- /0d -->
          </div>
          <div class="brd_black align-top col-6">
            <!-- Corusel -->
            <!-- below corusel -->
            <!-- /Corusel -->
          </div>
        </div>
      </div>
      <div class="brd_black align-self-center col">&nbsp;</div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

</body>

</html>

我如何修复 IE 图像和列 flexbox 错误？

How can i fix IE image and column flexbox bug?

css

flexbox

internet-explorer-11

bootstrap-4