Flexbox alternative for IE9

Question

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.

Solution 1

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

Solution 2

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.

.container {
    display: table-cell; // ie9
    display: flex;       // others
}

Solution 3

One year later, this solution, using JavaScript to adjust the layout in older browsers, seems interesting => 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.

Comments

[Scott Romack]

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

[bernk]

I think it should be .container {display: table-cell; display: flex;}

[ptim]

nice! I guess there may be some edge cases where flexbox-legacy browsers render slightly differently.. autoprefixer is still handy!

[maxedison]

This doesn't work. It's the child elements of .container that need to be positioned inline, not .container itself.

[GoldBishop]

quality utility does not need alot of active changes. Google's BootStrap seems to also provide the functionality we have all struggled with.

[Alex Morales]

Actually it's Twitter Bootstrap. Just sayin'. ;)

[Scott Romack]

Add the above code to the child elements if that is what you need.

[GoldBishop]

Technicalities, they all come from the same branch of the tree ;)

[Patrick]

I like to create a mixin so that another dev, but most likely myself, do not forget to add in the fallback: @mixin display-flex() {display: table-cell; display: flex;}