Рассмотрим следующий фрагмент:
.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? (если да, будет оценен указатель)
Есть ли известный обходной путь?
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 и не позаботился о том, чтобы исправить мои отступы.
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].