Making IE play nice…still

I came across an issue with IE9 yesterday, while using Twitter Bootstrap. I almost couldn’t believe it, having copied the template from the Bootstrap website, I thought it would be issue free. To add to my exasperation, the bug was in IE9 – the modern browser

At first I simply couldn’t understand what was wrong. Everything seemed to be correct, and then I looked at the IE developer tools. IE was rendering the page in quirks mode! Having used the HTML5 doc type, having not played with the styles in bootstrap, even having removed a few HTML comments I’d added, it was still happening!

Luckily, a guy that I was working with had seen the issue before, and before long he’d found a tag which sorted everything out. Rather than working fine with valid and correct HTML, IE9 needs this <meta> tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Once this had been put into the <head> of the document, everything rendered with the IE9 engine and all was well again. But it is still quite ridiculous to see some hack-like technique being required in any modern browser.

What’s worse is that we won’t be rid of IE9 any time soon. With the release preview of IE10 for Windows 7 only having been made available last month, it’s unlikely there will be a huge rush to upgrade. Especially as IE10 sports Windows 8 like gesture controls for a lot of operations, which will surely alienate most users of the previous browsers.

It seems that this is yet another IE-only hack that we’ll just have to endure for a little while more!

EDIT (09/01/2013): Looks like I may’ve over-looked part of the bootstrap documentation, it seems that this meta tag is indeed mentioned in the “Responsive design” section! Oops!

Useful Links

 Microsoft explaining their different rendering modes

 A stackoverflow question which was answered with this <meta> tag

Advertisements

Published by

Andrew Bridge

A student web developer with a keen interest in bringing function and form together as one to create a powerful, beautiful experience for users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s