Question

我有三张弹性盒卡片，每张卡片的顶部都带有一个img，后面是一个信息部分，分为两列。除Internet Explorer 9和11（我无法测试IE10）外，在所有浏览器中看起来都不错。问题是添加了过多的底部填充。请有人建议如何解决此问题吗？

.features-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 120rem;
  width: 100%;
}

.features-card {
  box-shadow: 0 .6rem .9rem 0 rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  transition: transform .3s;
  width: 100%;
}

.features-card:nth-child(3) {
  margin-bottom: 0;
}

.features-card-img {
  border-bottom: 3px solid #fdd400;
}

.features-card-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1.6rem 5%;
  width: 100%;
}

.features-card-info-col-1 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
}

.features-card-info-col-2 {
  margin-left: 1rem;
}

@media screen and (min-width: 56.25em) {
  /* 900/16 */
  .features-container {
    flex-direction: row;
  }
  .features-card {
    margin-right: 2.5%;
    max-width: 35rem;
  }
  .features-card:nth-child(3) {
    margin-bottom: 3rem;
    margin-right: 0;
  }
}

<div class="features-container">
  <article class="features-card">
    <a class="features-card-link" href="">
      <img class="features-card-img" src="" alt="">
      <div class="features-card-info">
        <div class="features-card-info-col-1">
          <h3 class="features-card-heading">Heading</h3>
          <p class="features-card-text">Some text</p>
        </div>
        <div class="features-card-info-col-2">
          <i class="fas fa-angle-double-right"></i>
        </div>
      </div>
    </a>
  </article>
</div>

Answer 1

IE9不支持flexbox。您可以参考此问题的第一个答案： Flexbox code working on all browsers except Safari. Why? 我使用您的代码进行了演示，并且在包括IE11在内的所有浏览器中看起来都不错。修改css部分，使其在IE10中看起来相同：

.features-card-img { border: 0px; border-bottom: 3px solid #fdd400; }

Internet Explorer向弹性框添加了其他填充。如何解决？

1 个答案: