我使用bootstrap4 css制作了可调整大小的模板。在“确定”中，除IE 11.0以外的所有浏览器都可以。
为确保.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>
答案 0 :(得分：2)
以访客身份从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>