3 ms·
I may have overstated IE7 support; sorry. I just tested my site using IE10's developer tools to simulate older versions (which isn't a perfect simulation, but I
by DougWebb 13y ago
I may have overstated IE7 support; sorry. I just tested my site using IE10's developer tools to simulate older versions (which isn't a perfect simulation, but I don't have VMs available atm). IE10 renders perfectly. IE8 and IE9 in their respective Browser Mode and Document Standard Mode, are usable but not rendered the way they're supposed to be. Somewhat graceful degradation for those two. IE7 is rendered completely incorrectly, but the main functionality is still usable. For IE7-9, my UI design has a switch for one main feature that can be turned off, which would fix most of the brokenness. It's a side-panel navigation and tools area that's collapsible. Making it fixed, and also getting rid of a fixed footer, simplifies the layout a lot for the older browsers.
I had looked at Flexie too. I think, because I'm making sure to include the 2009 syntax along with the current syntax everyplace I can, Flexie would allow IE7-9 to work better for me. Not perfectly, but better. That might've been my other option, besides turning the more advanced layout stuff off. But I just reviewed my code and I don't have Flexie anywhere, so I'm not currently using it. (This codebase is used to generate webapps for clients, so adding Flexie could be something that's done case-by-case if a client requires IE7-9 support.)
BTW, here's an example. To make an element a Flexbox container, instead of using this:
#elem
{
display: flex;
flex-flow: row nowrap;
}
I have this:
#elem
{
display: -ms-flexbox;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.no-flexbox #elem
{
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
To make things easier, all of my flexbox containers are defined in one place so I don't have to repeat all of that.