#html #css #internet_explorer
Очень трудно было выбрать тему для данного вопроса: "У меня не так отображается, помогите!" - это не тема, но дело в том, что в данном вопросе рассматривается очередной баг Internet Explorer (то есть в других браузерах всё отображается нормально), причину которого никак не удаётся выяснить. К задаче. У нас типичный блок .Wrapper, который имеет ширину 100% от окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width: В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже: Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно. Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее: Расскажу о том, что обнаружил сам. Сама по себе верхняя компоновка Wrapper-Centerer-Содержимое отображается корректно (её содержимое - таблица). Баг появляется при появлении нижней комбинации. Вообще там есть внутренний контейнер с зафлоченными элементами, но всё равно неясно, в чём проблема. Естественно, везде где надо, есть overflow: hidden;.
Ответы
Ответ 1
К section добавьте flex: 1 0 auto: https://jsfiddle.net/Kniha/mLh63fao/3/ В примере добавлено через section[class$='-RootWrapper'].
Комментариев нет:
Отправить комментарий