html - Flexbox alternative for IE9 -

html - Flexbox alternative for IE9 -

i have developed website chrome (easiest design for) getting ie back upwards model.

that beingness said, started ie11 , made necessary changes quirky differences between ie & chrome. stepping downwards ie versions. able 90% of webpages display correctly css ie10. of css elements have these 2 browsers, part irrelevant ie9.

i maintain needing have multiple browser specific style sheets, if possible.

first problems converting ie10+ implementation of flexbox model of css.

current implementation flexbox container ( & = div ):

&#navcontainer{ display: flex; //current browsers (ie11, chrome, etc) display: -ms-flexbox; //ie10 implementation } &#teamssection { text-align: center; } &.navsection { margin: 0px 7px; padding: 4px 0px 0px 0px; } &#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 team:</label><br /> <div id="teams"></div> </div> <div id="usersection" class="navsection hidden"> <label>select user:</label><br /> <div id="requestor"></div> </div> </div>

i know ie9 not implement flexbox, please don't insult research have done. need equivalent implementation allow me alter html little possible.

use modernizr observe whether flex capabilities present, , provide fallback styles necessary. modernizr add together classes flexbox, no-flexbox, , flexbox-legacy html element, in styles can use:

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

i highly recommend reading through zoe gillenwater's (@zomigi) presentations on subject, particularly leveling 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: illustration , without flex order

also, in presentation css3 layout, there few sideby side previews of layouts , without flexbox:

slide 73: using inline-block flexbox: horizontal form slide 79: using inline-block flexbox: horizontal navigation

some of takeaways me:

browser back upwards ie10+ pretty caniuse use auto-prefixr handle browser prefixes use modernizr provide fallbacks "flexbox not or nothing" @zomigi

html css internet-explorer cross-browser flexbox