Flexbox替代IE9

我最初开发了一个使用Chrome的网站（最容易devise），但现在我正在使用IE支持模式。

这就是说，我从IE11开始，并对IE和Chrome之间的奇怪差异做了必要的修改。 但现在我正在降低IE版本。 我能够得到90％的网页正确显示与IE10的CSS。 但是现在我对这两个浏览器的大部分CSS元素，对于IE9来说大部分是不相关的。

如果可能的话，我想避免需要多个浏览器特定的样式表。

第一个问题是转换CSS的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，所以请不要侮辱我已经做的研究。 我需要一个等效的实现，这将允许我尽可能less地改变HTML。

Answer 1

使用modernizr检测是否存在弹性function，并在必要时提供后备样式。 Modernizr会将类似flexbox ， no-flexbox和flexbox-legacy类添加到html元素，所以在你的样式中你可以使用：

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

我强烈推荐通过Zoe Gillenwater（ @zomigi ）关于这个主题的介绍，尤其是Flexbox（Smart Web Conference – 2014年9月）

• 幻灯片21：水平导航间距> display: inline-block;
• 幻灯片62：固定没有弹性盒的元素> display: table-cell;
• 幻灯片70,71：alignment表单回退
• 幻灯片88,91：有和没有flex顺序的例子

此外，在她的演示文稿CSS3布局中 ，有几个很好的与flexbox有和没有布局的sideby预览：

• 幻灯片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调整旧版浏览器布局的解决scheme似乎很有趣=> https://github.com/10up/flexibility

在Github上近2000的星星，但最后一次提交是3个月前，我不知道它是否仍然积极维护。