IE9 的 Flexbox 替代品 [英] Flexbox alternative for IE9

问题描述

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

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

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

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

Flexbox 容器的当前实现:

div#navContainer{显示:弹性；//当前浏览器(IE11、Chrome等)显示:-ms-flexbox；//IE10实现}div#TeamsSection {文本对齐:居中；}div.NavSection {边距:0px 7px；填充:4px 0px 0px 0px;}div#团队{边距:0px；选择 {边距:0px；}}

HTML:

<div id="LogoSection" class="NavSection"><div id="标志"><img src="Images/Logo.png"/>

<div id="TeamsSection" class="NavSection"><label>选择一个团队:</label><br/><div id="团队"></div>

<div id="UserSection" class="隐藏导航部分"><label>选择一个用户:</label><br/><div id="请求者"></div>

我知道 IE9 没有实现 Flexbox，所以请不要侮辱我已经做过的研究.我需要一个等效的实现来让我尽可能少地更改 HTML.

解决方案

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

 .container {显示:弹性；}.no-flexbox .container {显示:表格单元格；}

我强烈建议通读 Zoe Gillenwater (@zomigi) 关于该主题的演讲，尤其是 使用 Flexbox 升级(智能网络会议 - 2014 年 9 月)

• 幻灯片 21:水平导航间距 >display: inline-block;
• 幻灯片 62:在没有 flexbox 的情况下固定元素 >display: table-cell;
• 幻灯片 70,71:对齐表单回退
• 幻灯片 88,91:带有和不带有 flex order 的示例

此外，在她的演示文稿 CSS3 Layout 中，还有一些不错的并排预览有和没有 flexbox 的布局:

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

我的一些收获:

• 浏览器支持 ie10+ 非常好 caniuse
• 使用auto-prefixr来处理浏览器前缀
• 使用modernizr 提供回退
• flexbox 并非全有或全无"；@zomigi

I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.

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.

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.

Current Implementation for the flexbox container:

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>

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.

解决方案

Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use:

    .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)

• 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

Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:

• slide 73: Using inline-block with flexbox: horizontal form
• slide 79: Using inline-block with flexbox: horizontal navigation

Some of takeaways for me:

• browser support ie10+ is pretty good caniuse
• use auto-prefixr to handle browser prefixes
• use modernizr to provide fallbacks
• "flexbox is not all or nothing" @zomigi

这篇关于IE9 的 Flexbox 替代品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！