如何修复IE图像和列的flexbox错误？
如何修复IE图像和列的flexbox错误？
提问于 2019-06-19 22:05:48
我已经使用bootstrap4 css制作了一个可调整大小的模板。在除IE 11.0之外的所有浏览器中都显示OK。
可以肯定的是，.d-flex类不能正常工作(我使用它来使我的所有列的高度相同)。在谷歌上搜索解决方案不会有任何进展。如果我删除这个类，除了相同高度的列之外，一切似乎都是正常的。
但最有趣的事情发生在图像上--它们在ie中是全尺寸显示的。我在这里尝试了不同的修复方法- Bootstrap Image Responsive messed up on IE，但没有成功。我可以在没有.d-flex的情况下将图片放入容器中，但不管怎样，图片和文本下面有很多可点击的空白区域。
<!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"> </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"> </div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-19 22:24:07
作为客人从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"> </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"> </div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56669644
复制相关文章
相似问题