如何修复IE图像和列flexbox错误? [英] How can i fix IE image and column flexbox bug?

查看：62
本文介绍了如何修复IE图像和列flexbox错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用bootstrap4 css制作了可调整大小的模板.在确定"中，除IE 11.0以外的所有浏览器都可以.

I've made a resizable template using bootstrap4 css. In OK in all browsers except IE 11.0.

为确保.d-flex类不能正常工作(我使用它来使我所有的列都具有相同的高度).谷歌搜索解决方案并没有取得进展.如果我删除该类，则除了相同高度的列外，其他所有内容似乎都可以.

To be sure .d-flex class doesn't works properly (I've used it to make all of my columns of the same height). Googling for solution doesn't make progress. If I remove this class all seems to be OK except the same height of columns.

但是最有趣的事情发生在图像上-它们实际上以全尺寸显示在ie中.还尝试了其他修复方法- Bootstrap Image Responsive在IE上搞砸了也没有运气我可以在没有.d-flex的情况下将图像放入容器中，但是无论如何，图像和文本下方都有很多可单击的空白.

But the most interesting thing happens with images - they really displayed at full size in ie. Also tried different fixes from here - Bootstrap Image Responsive messed up on IE and no luck. I can fit image in container without .d-flex but anyway there are a lot of clickable white space below image and text.

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

推荐答案

以访客身份从IE11答复. (G-CYR)

Answered from IE11 as a guest . (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错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆