Internet Explorer добавляет дополнительные отступы в flex box.Как исправить? - PullRequest
Новая
       39

Internet Explorer добавляет дополнительные отступы в flex box.Как исправить?

0 голосов
/ 14 мая 2019

У меня есть три карты 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>

1 Ответ

0 голосов
/ 14 мая 2019

IE9 не поддерживает flexbox.Вы можете обратиться к первому ответу на этот вопрос: Код Flexbox, работающий во всех браузерах, кроме Safari.Почему? Я использовал ваш код для демонстрации, и он отлично выглядит во всех браузерах, включая IE11.Измените часть CSS, и она будет выглядеть так же в IE10:

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

...