Flexbox替代IE9 [英] Flexbox alternative for IE9

问题描述

我已经开发了一个Chrome网站（最容易设计），但现在我得到了IE支持模型。

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

这就是说，我开始与IE11和对IE和IE之间的奇特差异进行了必要的更改。铬。但现在我下台IE版本。我能够得到90％的网页正确显示与IE10的CSS。但现在我对这两个浏览器的大多数CSS元素是大部分与IE9无关。

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.

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

First problems is converting IE10+ implementation of the flexbox model of CSS.

flexbox容器的当前实现：

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>

我知道IE9不实现Flexbox，所以请不要侮辱我已经做过的研究。我需要一个等效的实现，这将允许我尽可能少地更改HTML。

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.

推荐答案

使用 modernizr 来检测是否存在flex功能，并在必要时提供回退样式。 Modernizr将添加类 flexbox ， no-flexbox 和 flexbox-legacy 到html元素，所以在你的样式你可以使用：

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;
    }

我强烈推荐阅读Zoe Gillenwater的（ @ zomigi ）关于此主题的演示文稿，特别是调平使用Flexbox（智能网络会议 - 2014年9月）

I highly recommend reading through Zoe Gillenwater's (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference - September 2014)

• 幻灯片21：水平导航间距> display：inline-block;


• slide 62：固定没有flexbox的元素> display：table-cell;


• slide 70,71：对齐形式备用


• slide 88,91：包含和不包括弹性订单的示例

• 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

此外，在她的演示文稿 CSS3布局中，是具有和不具有flexbox的布局的几个好的并排预览：

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

• slide 73：使用带有flexbox的inline-block： li>
  
• slide 79：使用带有flexbox的inline-block：水平导航

• 浏览器支持ie10 +非常不错 caniuse < a>


• 使用自动前缀处理浏览器前缀


• 使用modernizr提供回退


• flexbox不是全部或全无@zomigi

• 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

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