Кроссбраузерность блока

Question

Сверстал сайт по макету. Нужным элементам добавил вендорные префиксы. Однако есть участки на сайте, которые работают во всех браузерах прекрасно, но именно в IE, вёрстка по ним "плывёт". Не могу разобраться, что делаю не так. В примере ниже две фотографии сильно искажены, при отображении в IE, в остальных браузерах отображаются нормально, в круглом блоке с border-radius: 50%;

Привожу пример:

.offer_info {
  margin-top: 50px;
}

.offer_info,
.info_1,
.info_2 {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.info_1 {
  margin-right: 15px;
}

.info_2 {
  margin-left: 15px;
}

.img_1,
.img_2 {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.style_img {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #1db05e;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.offer .text_info {
  padding-left: 30px;
  color: #566375;
  font-size: 16px;
  margin-top: 0;
  line-height: 25px;
}

<div class="offer_info">

  <div class="info_1">

    <div class="img_1">
      <div class="style_img">
        <img src="img/fon_info1.png" alt="img">
      </div>
    </div>

    <p class="text_info">
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi gravida tellus in purus pharetra, vel dignissim mauris viverra. Maecenas vitae risus est. In hendrerit, massa at.
    </p>

  </div>

  <div class="info_2">

    <div class="img_2">
      <div class="style_img">
        <img src="img/fon_info2.png" alt="img">
      </div>
    </div>

    <p class="text_info">
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi gravida tellus in purus pharetra, vel dignissim mauris viverra. Maecenas vitae risus est. In hendrerit, massa at.
    </p>
  </div>

</div>

БЛОГ НА HUSL

Кроссбраузерность блока

Ответы (0 шт):