| demoniqus | 05.06.2015 14:42 |
Странности позиционирования и выравнивания в IE11
На странице есть абсолютно позиционированный контейнер. Его размеры являются плавающими (30%-90% окна). Задача центрировать данный контейнер по горизонтали и вертикали в окне.
Вот исходный код:
Решение с нулевыми top, left, right, bottom + margin: auto взято из сети, как одно из наиболее распространенных. В Chrome, FF, Safari все работает. В IE по какой-то неведомой мне причине контейнер жмется влево. Я полез в стили, чтобы понять, что же происходит. В рассчитанных значениях я вижу, что размер margin-left и margin-right совпадают и не являются нулевыми. Параметры left и right также имеют одинаковое значение. Position = absolute. Кроме того, вертикальное центрирование применилось к контейнеру. По идее все условия для горизонтального центрирования присутствуют. Но как раз горизонтально блок не стоит по центру родителя. А вот если вручную прописать нужный margin-left, то блок смещается правее... Можно также прописать вручную left - блок смещается в центр, а величина margin-left и margin-right становится вполовину меньше...
Я полез исследовать раскладку - в ней я обнаружил явное отличие от Chrome - наличие верхнего Offset, при этом слева Offset = 0. Что интересно, так это то, что согласно раскладке этот верхний Offset вываливается за доступные размеры...
Версия браузера 11.0.9600.17728
Кто-нибудь знает причины такого поведения браузера?
ЗЫ Данное поведение наблюдается как в составе страницы, так и на чистой странице. Т.е. это не влияние сторонних стилей.
PSS Еще наблюдения:
В раскладке я дважды кликаю по ширине контейнера (или по левому offset), ввожу произвольное значение и жму Esc - раскладка начинает меняться: контейнер центрируется, а также изменяются левый offset. ширина контейнера и боковые margin. Причем изменения происходят каждый раз.
Если box-sizing у .content-container изменить на content-box, то на первый раз происходит центрирование контейнера за счет появления левого offset в раскладке, равного margin, а далее уже ничего не меняется...
Я в полной прострации...:help:
Вот исходный код:
<html>
<head>
<title>
</title>
</head>
<body class="StyleBody">
<style type="text/css">
.content-container {
background-color: linen;
padding: 0px;
margin: 0px;
box-sizing: border-box;
-webkit-border-radius: 5%;
-moz-border-radius: 5%;
-o-border-radius: 5%;
border-radius: 5%;
line-height: normal;
border: 4px solid wheat;
}
.content-container {
position: absolute;
display: inline-block;
max-width: 90%;
max-height: 90%;
min-width: 30%;
min-height: 30%;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.content-container .content {
display: inline-block;
overflow: auto;
padding: 0px;
text-align:
left;
margin: 10px;
}
</style>
<div class="content-container" style="">
<div class="content">
Некое содержимое
</div>
</div>
</body>
</html>
Решение с нулевыми top, left, right, bottom + margin: auto взято из сети, как одно из наиболее распространенных. В Chrome, FF, Safari все работает. В IE по какой-то неведомой мне причине контейнер жмется влево. Я полез в стили, чтобы понять, что же происходит. В рассчитанных значениях я вижу, что размер margin-left и margin-right совпадают и не являются нулевыми. Параметры left и right также имеют одинаковое значение. Position = absolute. Кроме того, вертикальное центрирование применилось к контейнеру. По идее все условия для горизонтального центрирования присутствуют. Но как раз горизонтально блок не стоит по центру родителя. А вот если вручную прописать нужный margin-left, то блок смещается правее... Можно также прописать вручную left - блок смещается в центр, а величина margin-left и margin-right становится вполовину меньше...
Я полез исследовать раскладку - в ней я обнаружил явное отличие от Chrome - наличие верхнего Offset, при этом слева Offset = 0. Что интересно, так это то, что согласно раскладке этот верхний Offset вываливается за доступные размеры...
Версия браузера 11.0.9600.17728
Кто-нибудь знает причины такого поведения браузера?
ЗЫ Данное поведение наблюдается как в составе страницы, так и на чистой странице. Т.е. это не влияние сторонних стилей.
PSS Еще наблюдения:
В раскладке я дважды кликаю по ширине контейнера (или по левому offset), ввожу произвольное значение и жму Esc - раскладка начинает меняться: контейнер центрируется, а также изменяются левый offset. ширина контейнера и боковые margin. Причем изменения происходят каждый раз.
Если box-sizing у .content-container изменить на content-box, то на первый раз происходит центрирование контейнера за счет появления левого offset в раскладке, равного margin, а далее уже ничего не меняется...
Я в полной прострации...:help: