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.
The crazy thing is that it can support the latest standards … you just have to tell it to use them by forcing it into “IE9 Mode” (which you’d be completely right in thinking that IE9 would use by default … and absolutely wrong in practice).
How? Well, it’s not enough to use the standard HTML5 declaration: <html lang=”en”> Internet Explorer 9 will see this and happily continue along in compatibility mode.
No, what you need to do is declare it with a doctype: <!doctype html lang=”en”>, as documented in “Defining Document Compatibility”. When I added this to my HTML build outs, Internet Explorer suddenly started displaying everything just as well as Safari, Firefox, and Chrome.
Now to start on the Drupal 7 build…