The Mysteries of Internet Explorer 9’s Compatibility Modes
It’s amazing what a little free time can do. Back in Autumn 2011 I worked hard to come up with wireframes, design comps, and an HTML build out of the new Nuketown. It was built on HTML5 and CSS3 and it was all going swimmingly … until I looked at it in Internet Explorer 9.
The entire design fell apart. IE9, which I thought had better standards support than its predecessors, simply didn’t understand HTML5 elements like “nav” or “figure”. It refused to style them, and without the formatting, the design collapsed. About the same time work got nuts, and most of my free time was devoured by work projects. I probably could have pressed ahead with Nuketown, but truth be told I just didn’t have the energy to fight the good fight.
Flashforward a few months. My big projects are complete, and I finally found some time to figure out what the hell was going so wrong with IE9. An hour of searching and experimentation revealed the answer: IE9 mode.
You see, Internet Explorer has a long history of “modes” — ways of operating that supported (or broke) certain standards. It was quirky to say the least, and I’d forgotten about it. By default, Internet Explorer 9 operates in compatibility mode, which apparently means it tries to display everything as a sucky old browser would, while choking on the latest HTML5 standards.