Странности позиционирования и выравнивания в IE11

@operada · Регистрация: 05.02.2015

Студворк — интернет-сервис помощи студентам

На странице есть абсолютно позиционированный контейнер. Его размеры являются плавающими (30%-90% окна). Задача центрировать данный контейнер по горизонтали и вертикали в окне.
Вот исходный код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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
Кто-нибудь знает причины такого поведения браузера?
ЗЫ Данное поведение наблюдается как в составе страницы, так и на чистой странице. Т.е. это не влияние сторонних стилей.

@operada · 05.06.2015, 14:26 **[ТС]**

Дополню свои наблюдения:
В раскладке я дважды кликаю по ширине контейнера (или по левому offset), ввожу произвольное значение и жму Esc - раскладка начинает меняться... Пока не пойму принцип... меняется то левый offset, то правый margin

@monochromer · 05.06.2015, 15:02

operada,
для .content-container дополнительно:

CSS
1
2
3
4
.content-container {
  width: 100%;
  height: 100%;
}

@operada · 05.06.2015, 15:44 **[ТС]**

Самое плохое, что при любом таком раскладе я теряю важную фишку: я хотел, чтобы контейнер мог изменять свой размер в определенных границах в зависимости от количества содержимого... а получается. что ведет он себя так, как будто ему задали один единственный размер... Так можно обойтись без max- и min-, а сразу задать width, height (например процентов по 80) и margin...

@monochromer · 09.06.2015, 07:01

operada,
есть некоторое множество способов выравнивания контейнера, для учета содержимого можно воспользоваться inline-block.

@operada · 09.06.2015, 08:15 **[ТС]**

про inline-block тоже думал. С ним без проблем выравнять блок по горизонтали, но возникает проблема с вертикальным выравниванием, ведь для этого измерения также планировалось задать допустимые границы, а не единственное статичное значение...
В общем я отказался от этой задумки и прописал единственное статичное значение ширины и высоты блока... Мои благодарности персонально IE ...

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@operada 2 / 2 / 1 Регистрация: 05.02.2015 Сообщений: 29
	05.06.2015, 14:26 [ТС]
	Дополню свои наблюдения: В раскладке я дважды кликаю по ширине контейнера (или по левому offset), ввожу произвольное значение и жму Esc - раскладка начинает меняться... Пока не пойму принцип... меняется то левый offset, то правый margin 0

@operada 2 / 2 / 1 Регистрация: 05.02.2015 Сообщений: 29
	05.06.2015, 15:44 [ТС]
	Самое плохое, что при любом таком раскладе я теряю важную фишку: я хотел, чтобы контейнер мог изменять свой размер в определенных границах в зависимости от количества содержимого... а получается. что ведет он себя так, как будто ему задали один единственный размер... Так можно обойтись без max- и min-, а сразу задать width, height (например процентов по 80) и margin... 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	09.06.2015, 07:01
	operada, есть некоторое множество способов выравнивания контейнера, для учета содержимого можно воспользоваться inline-block. 1

@operada 2 / 2 / 1 Регистрация: 05.02.2015 Сообщений: 29
	09.06.2015, 08:15 [ТС]
	про inline-block тоже думал. С ним без проблем выравнять блок по горизонтали, но возникает проблема с вертикальным выравниванием, ведь для этого измерения также планировалось задать допустимые границы, а не единственное статичное значение... В общем я отказался от этой задумки и прописал единственное статичное значение ширины и высоты блока... Мои благодарности персонально IE ... 0