html - IE9 的 Flexbox 替代品

Question

我最初使用 Chrome 开发了一个网站(最容易设计)，但现在开始使用 IE 支持模型。

也就是说，我从 IE11 开始，针对 IE 和 Chrome 之间的古怪差异进行了必要的更改。但是现在我正在降级IE版本。我能够让 90% 的网页使用 IE10 的 CSS 正确显示。但是现在我为这两个浏览器提供的大部分 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。

Answer 1

使用modernizr检测是否存在 flex 功能，并在必要时提供回退样式。 Modernizr 将向 html 元素添加 flexbox、no-flexbox 和 flexbox-legacy 等类，因此在您的样式中您可以使用:

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

我强烈建议阅读 Zoe Gillenwater ( @zomigi ) 关于该主题的演讲，尤其是 Leveling Up With Flexbox (Smart Web Conference - September 2014)

• 幻灯片 21:水平导航间距 > display: inline-block;
• 幻灯片 62:不使用 flexbox 固定元素 > display: table-cell;
• 幻灯片 70,71:对齐表单后备
• 幻灯片 88,91:使用和不使用 flex 订单的示例

另外，在她的演讲中 CSS3 Layout , 有一些很好的并排预览有和没有 flexbox 的布局:

• 幻灯片 73:将内联 block 与 flexbox 结合使用:水平形式
• 幻灯片 79:将内联 block 与 flexbox 结合使用:水平导航

我的一些收获:

• 浏览器支持 ie10+ 相当不错 caniuse
• 使用auto-prefixr处理浏览器前缀
• 使用 modernizr 提供回退
• “flexbox 不是全有或全无”@zomigi