Wednesday, 20 February 2013 by Ian Ebden
Looks like this article is over a year old, so some of the technical solutions or opinions may be a bit outdated now.
The top portion of these styles is taken from Chris’ article, I’ve just added some background colours to show up the columns better in the browser. The bottom half is where we use our conditional classes, and do our float fallback.
Firstly (for <IE9) we get the
<nav> displaying as block-level elements, just as they would in modern browsers. Next, since <IE10 will simply ignore all our earlier Flexbox declarations, we can use conditional classes (.lt-ie10) to target those browsers and use the old float method for layout. Job done.
A quick cross-browser test in BrowserStack came up trumps (apart from a width issue in Firefox which I’m looking into). So if you’re okay about mixing old and new Flexbox syntaxes in your styles (and why wouldn’t you be?), then now might be the time to start using Flexbox on live projects.