Html IE9 的 Flexbox 替代品
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24371408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox alternative for IE9
提问by GoldBishop
I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.
我最初使用 Chrome 开发了一个网站（最容易设计），但现在正在使用 IE 支持模型。
That being said, I started with IE11 and made the necessary changes for the quirky differences between IE & Chrome. But now I am stepping down the IE versions. I was able to get 90% of the webpages to display correctly with CSS for IE10. But now most of the CSS elements that I have for these two browsers, are for the most part irrelevant for IE9.
话虽如此，我从 IE11 开始，并针对 IE 和 Chrome 之间的古怪差异进行了必要的更改。但现在我正在退出 IE 版本。我能够使用 IE10 的 CSS 正确显示 90% 的网页。但是现在我为这两个浏览器提供的大部分 CSS 元素在很大程度上与 IE9 无关。
I would like to keep from needing to have multiple browser specific style sheets, if possible.
如果可能的话，我想避免需要多个浏览器特定的样式表。
First problems is converting IE10+ implementation of the flexbox model of CSS.
第一个问题是转换 IE10+ 实现 CSS 的 flexbox 模型。
Current Implementation for the flexbox container:
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:
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>
I know IE9 does not implement Flexbox, so please don't insult the research I have already done. I need an equivalent implementation that will allow me to change the HTML as little as possible.
我知道 IE9 没有实现 Flexbox，所以请不要侮辱我已经做过的研究。我需要一个等效的实现来让我尽可能少地更改 HTML。
回答by ptim
Use modernizrto detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacyto the html element, so in your styles you can use:
使用Modernizr检测是否存在 flex 功能，并在必要时提供回退样式。Modernizr 将向html 元素添加诸如flexbox,no-flexbox和 之类的类flexbox-legacy，因此您可以在样式中使用：
.container {
display: flex;
}
.no-flexbox .container {
display: table-cell;
}
I highly recommend reading through Zoe Gillenwater's (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference - September 2014)
我强烈建议通读 Zoe Gillenwater ( @zomigi) 关于这个主题的演讲，特别是Leveling Up With Flexbox（智能网络会议 - 2014 年 9 月）
- slide 21: horizontal navigation spacing >
display: inline-block; - slide 62: pinning elements without flexbox >
display: table-cell; - slide 70,71: aligning forms fallbacks
- slide 88,91: example with and without flex order
- 幻灯片 21：水平导航间距 >
display: inline-block; - 幻灯片 62：在没有 flexbox 的情况下固定元素 >
display: table-cell; - 幻灯片 70,71：对齐表单回退
- 幻灯片 88,91：使用和不使用弹性订单的示例
Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:
此外，在她的演示文稿CSS3 Layout 中，有一些很好的带有和不带有 flexbox 的布局的并排预览：
- slide 73: Using inline-block with flexbox: horizontal form
- slide 79: Using inline-block with flexbox: horizontal navigation
- 幻灯片 73：在 flexbox 中使用内联块：水平形式
- 幻灯片 79：将 inline-block 与 flexbox 结合使用：水平导航
Some of takeaways for me:
对我来说的一些要点：
- browser support ie10+ is pretty good caniuse
- use auto-prefixrto handle browser prefixes
- use modernizr to provide fallbacks
- "flexbox is not all or nothing" @zomigi
- 浏览器支持 ie10+ 还不错caniuse
- 使用auto-prefixr处理浏览器前缀
- 使用 Modernizr 提供回退
- “flexbox 不是全有或全无”@zomigi
回答by Scott Romack
I like the above answer but you don't have to use modernizr. You could simply use table layout for ie9 and flexbox for others.
我喜欢上面的答案，但您不必使用 Modernizr。您可以简单地为 ie9 使用表格布局，为其他人使用 flexbox。
.container {
display: table-cell; // ie9
display: flex; // others
}
回答by Michael Rambeau
One year later, this solution, using JavaScript to adjust the layout in older browsers, seems interesting => https://github.com/10up/flexibility
一年后，这个使用 JavaScript 调整旧浏览器布局的解决方案似乎很有趣 => https://github.com/10up/flexibility
Almost 2000 stars on Github but the last commit was 3 months ago, I don't know if it still actively maintained.
Github 上将近 2000 颗星，但最后一次提交是在 3 个月前，我不知道它是否还在积极维护。
