适用于IE9的Flexbox替代品

Question

我最初开发了一个Chrome网站(最容易设计),但现在我正在使用IE支持模式.

话虽如此,我开始使用IE11并对IE和Chrome之间的古怪差异进行了必要的更改.但现在我正在踩下IE版本.我能够使用CSS为IE10正确显示90%的网页.但是现在我为这两个浏览器提供的大多数CSS元素在很大程度上与IE9无关.

如果可能的话,我希望不再需要多个浏览器特定的样式表.

第一个问题是转换IE的flexbox模型的IE10 +实现.

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.

Answer 1

使用modernizr检测是否存在flex功能,并在必要时提供回退样式.Modernizr的将添加类一样flexbox,no-flexbox和flexbox-legacyHTML元素,所以在你的风格,你可以使用:

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

我强烈建议您阅读Zoe Gillenwater(@zomigi)关于此主题的演讲,特别是使用Flexbox升级(智能网络会议 - 2014年9月)

• 幻灯片21:水平导航间距> display: inline-block;
• 幻灯片62:没有弹性框的钉扎元素> display: table-cell;
• slide 70,71:对齐表单后备
• 幻灯片88,91:有和没有弹性顺序的示例

此外,在她的演示文稿CSS3 Layout中,有一些有和没有flexbox的布局的好侧面预览:

• slide 73:使用带有flexbox的内联块:水平形式
• 幻灯片79:在flexbox中使用内联块:水平导航

对我来说有一些要点:

• 浏览器支持ie10 +是非常好的caniuse
• 使用auto-prefixr来处理浏览器前缀
• 使用modernizr提供后备
• "flexbox不是全部或全无"@zomigi

Answer 2

我喜欢上面的答案,但你不必使用modernizr.你可以简单地为ie9使用表格布局,为其他人使用flexbox.

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

Answer 3

一年后,这个使用JavaScript调整旧版浏览器布局的解决方案似乎很有意思=> https://github.com/10up/flexibility

在Github上差不多2000颗星,但最后一次提交是在3个月前,我不知道它是否仍然积极维护.