ie11的bug怎么解决？

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 属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其伸缩子项的大小。查看错误。

使用 min-height 时，IE 11 无法正确垂直对齐项目