Flexbox альтернатива для IE9

Недавно я разработал веб-сайт с Chrome (проще всего разрабатывать), но теперь я попал в модель поддержки IE.

Сказав это, я начал с IE11 и внес необходимые изменения для необычных различий между IE и Chrome. Но теперь я уступаю IE версии. Я смог получить 90% веб-страниц, чтобы правильно отображать CSS для IE10. Но теперь большинство элементов CSS, которые у меня есть для этих двух браузеров, по большей части не имеют отношения к IE9.

Я бы хотел, если бы не было необходимости иметь несколько таблиц стилей в браузере.

Первые проблемы - это преобразование IE10 + в реализацию модели CSS flexbox.

Текущая реализация для контейнера flexbox:

div#navContainer{
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation
}

div#TeamsSection {
    text-align: center;
}

div.NavSection {
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;
}

div#teams {
    margin: 0px;

    select {
        margin: 0px;
    }
}

HTML:

<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

Я знаю, что IE9 не реализует Flexbox, поэтому, пожалуйста, не оскорбляйте проведенное мной исследование. Мне нужна эквивалентная реализация, которая позволит мне изменить HTML как можно меньше.

Ответ 1

Используйте modernizr, чтобы определить, имеются ли гибкие возможности, и, при необходимости, предоставлять резервные стили. Modernizr добавит в элемент html классы типа flexbox, no-flexbox и flexbox-legacy, поэтому в ваших стилях вы можете использовать:

    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }

Я очень рекомендую прочитать через Zoe Gillenwater (@zomigi) презентации по этому вопросу, в частности Выравнивание с помощью Flexbox (Smart Web Conference - сентябрь 2014 года)

слайд 21: расстояние по горизонтали > display: inline-block;
слайд 62: закрепление элементов без Flexbox > display: table-cell;
слайд 70,71: выравнивание форм резервных копий
слайд 88,91: пример с и без гибкого порядка

Кроме того, в ее презентации CSS3 Layout есть несколько хороших боковых превью макетов с и без flexbox:

слайд 73: Использование встроенного блока с flexbox: горизонтальная форма
слайд 79: Использование встроенного блока с flexbox: горизонтальная навигация

Некоторые из них для меня:

поддержка браузера ie10 + довольно хороша caniuse
используйте auto-prefixr для обработки префиксов браузера.
использовать modernizr для обеспечения резервных копий
"flexbox не все или ничего" @zomigi

Ответ 2

Мне нравится вышеупомянутый ответ, но вам не нужно использовать modernizr. Вы можете просто использовать таблицу layout для ie9 и flexbox для других.

.container {
    display: table-cell; // ie9
    display: flex;       // others
}

Ответ 3

Через год это решение, использующее JavaScript для настройки макета в старых браузерах, кажется интересным = > https://github.com/10up/flexibility

Почти 2000 звезд на Github, но последнее совершение было 3 месяца назад, я не знаю, будет ли он по-прежнему активно поддерживаться.