Internet Explorer 为弹性框添加了额外的填充。怎么修？答案

【问题标题】：Internet Explorer adds additional padding to flex box. How to fix?Internet Explorer 为弹性框添加了额外的填充。怎么修？
【发布时间】：2019-09-30 20:31:35
【问题描述】：

我有三个 flex-box 卡，每个卡都相同，顶部有一个 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>

【问题讨论】：

Flexbox 在 IE9 中不受支持，并且 IE10/11 存在重大错误，您必须为 IE10 使用旧语法。为什么要支持 IE9/10？如果您需要支持这些浏览器，那么 flexbox 不适合您。而且由于 Microsoft 已经弃用了对 IE9 和 10 的支持，您可能不必担心这些浏览器。 caniuse.com/#search=flex-box
对不起，我真的只想支持IE 10和11，但是我在IE 9上测试，结果和IE11一样。我使用了所有的 flex-box 浏览器前缀，但不希望代码太长，所以我省略了它们。

标签： css flexbox internet-explorer-11 internet-explorer-9 internet-explorer-10

【解决方案1】：

IE9 不支持弹性框。你可以参考这个问题的第一个答案： Flexbox code working on all browsers except Safari. Why? 我用你的代码做了一个演示，它在包括 IE11 在内的所有浏览器中看起来都很好。修改css部分，在IE10中看起来一样：

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

【讨论】：

我已经添加了上面的代码，但是问题在 IE11 中仍然存在。如果有帮助，版本是 11.2906.14393.0？我已经尝试制作 .features-card display: 块，当 .features-container 设置为 flex-direction 行但不是 flex-direction 列时，该块可以删除填充。
我的 IE11 版本是 11.706.17134.0 所以我认为这是由于旧版本的 IE。您的代码在我这边运行良好，在我按照您所说的更改后没有区别。我的建议是你可以迁移到最新版本的 IE11。