IE11 - выравнивание элементов, не работающих во всплывающем окне - PullRequest
Новая
       110

IE11 - выравнивание элементов, не работающих во всплывающем окне

0 голосов
/ 14 июля 2020

У меня есть всплывающее окно, которое я пытаюсь выровнять по вертикали на странице, я использую для этого flex (align-items), но это не работает для IE11. После некоторого исследования я обнаружил, что в IE11 есть ошибка, из-за которой элементы align-items не работают с min-height. Я уже пробовал некоторые из приведенных решений, но, похоже, ничего не работает.

Сохраните минимальную высоту и добавьте высоту 1px

Вывод:

  1. Центрирует все правильно (chrome и IE), но только когда есть мало содержания. Если вы добавите больше текста в пример, вы увидите, что верхняя часть всплывающего окна обрезана
  2. То же самое, что и в 1

Пример кода ЗДЕСЬ 

.popup-wrapper {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.popup-inner-wrapper {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  transform: translateZ(0);
}
<div class="popup-mask">
  <div class="popup-wrapper">
    <div class="popup-inner-wrapper">
      <div class="popup-container ">
        <div class="popup-content">
          (text)
        </div>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Это известная проблема из IE. Свойство min-height не будет работать при использовании с макетом Flexbox в IE. Мы можем использовать приемы css, чтобы исправить это в IE. Дайте родительскому элементу контейнер гибкого столбца в макете Flexbox.

CSS родительского элемента в макете Flexbox: 

display: flex;
flex-direction: column;

В вашем коде вы должны изменить стиль .popup-wrapper, как показано ниже: 

.popup-wrapper {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    display: flex;
 }

Результат в IE 11:

введите описание изображения здесь

0 голосов
/ 14 июля 2020

Поправил другой контейнер. .popup-container - вернуться в состояние по умолчанию. Приставку вспомнил -ms-flex-pack

.popup-inner-wrapper {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  min-height: 100vh;
  align-items: center;
  -ms-flex-pack: center; /*for ie*/
  justify-content: center;
  transform: translateZ(0);
}
...