如何修复ie11中的错误？

Question

是否有一些技巧可以消除ie11中图片和标题之间的巨大距离？现在在ie11中，我距离很远。如何在ie11中解决此问题？谢谢................................................ ................................................... ................................................... ...............................................

*,
::after,
::before {
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left; }

body {
  margin: 0; }

.wrapper {
	display: flex;
	flex-direction: column;
}

img {
  max-width: 100%;
  vertical-align: middle; }

.main-content {
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
    flex: 1 1 0%;
    width: 100%;
    max-width: calc(100% - 20px - 0.02px);
    order: 1;
    /*min-height: 640px;
	height: 640px;*/
}

.card {
  display: flex;
  flex-direction: column;
  background: #e4e6e8; 
}

.card {
  position: relative;
  margin-right: 10px;
  margin-left: 10px;
  flex: 0 0 calc(100% - 20px - 0.02px);
  width: 100%;
  max-width: calc(100% - 20px - 0.02px);
  margin-bottom: 20px;
}

@media (min-width: 992px) {
    .card {
	    flex: 0 0 auto;
	    width: 100%;
	    max-width: calc(33.33333% - 20px - 0.02px);
	}
}

.card-head img {
  max-width: 100%; 
}
.card-head a {
  display: block; 
}
.card-body {
  flex-grow: 1;
  margin: .5em 1em; 
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5px;
  margin-left: -0.5px; 
}
.card-foot > * {
  position: relative;
  margin-right: 0.5px;
  margin-left: 0.5px;
  flex: 1 1 0%;
  width: 100%;
  max-width: calc(100% - 1px - 0.02px); 
}
.cardList {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
  margin-bottom: calc(3rem - 20px);
  min-height: 640px;
  height: 640px;
}

<div class="main-content">

	<div class="cardList">
		<div class="card">
			<div class="card-head">
				<a href="detail.html"><img src="https://bainuo.github.io/1.svg" alt=""></a>
			</div>
			<div class="card-body">
				<h4 class="card-title">Title</h4>
				<p>lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis</p>
			</div>
			<div class="card-foot">
				<a href="#">Buy</a>
				<a href="#">Detail</a>
			</div>
		</div>
	</div>

</div>

Answer 1

我建议您看看https://caniuse.com/#search=flex

  

在IE10和IE11中，如果容器具有min-height但没有显式的height属性，则显示：flex和flex-direction：列的容器将无法正确计算其flexed子代的大小。查看错误。

     

使用最小高度时，IE 11无法正确垂直对齐项目