Блог

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

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

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

Первая проблема заключается в преобразовании IE10 в реализацию модели flexbox CSS.

Текущая реализация для контейнера 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 как можно меньше.

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

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

Я настоятельно рекомендую прочитать презентации Зои Гилленуотер (@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 довольно хороша, можно использовать
• используйте auto-prefixr для обработки префиксов браузера
• используйте modernizr для обеспечения резервных вариантов
• «flexbox — это не все или ничего» @zomigi

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

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

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

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