Рассмотрим следующий фрагмент:
.container {
display: flex;
align-items: center;
flex-direction: column;
border: 3px solid red;
}
.action {
flex-basis: 100%;
flex-shrink: 1;
width: 100%;
}
.button {
font-size: 12px;
line-height: 3rem;
width: 100%;
}<div class="container">
<div class="action">
<button class="button" type="button">
Button label 1
</button>
</div>
<div class="action">
<button class="button" type="button">
Button label 2
</button>
</div>
</div>В Chrome кнопки отображаются вертикально, и контейнер увеличивается, чтобы соответствовать им:
Но в IE11 кнопки перекрываются, и контейнер остается меньше одной кнопки:
Это известная ошибка в IE? (если да, будет оценен указатель)
Есть ли известный обходной путь?
0
23 Сен 2018 в 19:10
1 ответ
Лучший ответ
Ладно, разобрался! Проблема в align-items: center;. Я считаю, что это именно то, что вы ищете (без изменений в html):
.container {
display: flex;
flex-direction: column;
border: 3px solid red;
}
.button {
font-size: 12px;
line-height: 3rem;
width: 100%;
}
Боковое примечание: я знаю, что на коробке виртуальной машины написано предварительный просмотр MSEdge Win10, но это действительно IE11. Темно-синий значок «е» - это MS Edge. Мне пришлось взломать Блокнот и создать локальный HTML-файл, поскольку codepen не работает с IE 11 и не позаботился о том, чтобы исправить мои отступы.
0
20 Июн 2020 в 09:12
En Español