Flexbox не центрируется вертикально в IE
У меня есть простая веб-страница с некоторым содержанием Lipsum, которое находится в центре страницы. Страница отлично работает в Chrome и Firefox. Если я уменьшу размер окна, содержимое заполнит окно, пока оно не сможетt, а затем добавляет полосу прокрутки и заполняет содержимое за пределами экрана, вниз.
Тем не менее, страница нет центр в IE11. Я могу заставить страницу центрироваться в IE, сгибая тело, но если я это сделаю, то контент начинает уходить за пределы экрана вверх и обрезать верхнюю часть контента.
Ниже приведены два сценария. Смотрите связанные скрипки. Если проблема несразу видно, уменьшите размер окна результатов, чтобы оноS вынуждены генерировать полосу прокрутки.
Примечание. Это приложение предназначено только для последних версий Firefox, Chrome и IE (IE11), которые поддерживаютРекомендация кандидата Flexboxтак что совместимость функций не должнаЭто не проблема (в теории).
редактировать: При использовании полноэкранного API для полноэкранного отображения внешнего div все браузеры корректно центрируются с использованием оригинального CSS. Однако после выхода из полноэкранного режима IE возвращается к центру по горизонтали и выравниванию по вертикали сверху.
редактировать: IE11 использует не зависящую от поставщика реализацию Flexbox.Гибкая коробка ("Flexbox») обновления макета
Правильно центрирует и изменяет размеры в Chrome / FF, не центрирует, а правильно изменяет размеры в IE11
Скрипки:http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Центры правильно в любом месте, отсекаются сверху при уменьшении
Скрипки:http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}