Why does IE9 switch to compatibility mode on my website?

Question

Hi,

I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.

Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)

Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)

Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)

It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.

Thanks in advance,

Rene Geuze

Answer 1

I'm fairly sure that you must add this tag to your head to make IE 9 render in IE 9 mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This tag is present in all of Microsoft's HTML 5 demos, and I don't think it would be needed if IE 9 rendered in IE 9 mode by default.

Answer 2

Looks fine to me:

You're sure you didn't on the settings globally or something? This is a clean installation of the beta on Windows 7. The developer tools report that the page is defaulting to IE9 Standard Mode.

Answer 3

Works in IE9 documentMode for me.

Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:

• whether the user has clicked the ‘compatibility view’ button in that domain before;
• perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
• whether the user has opted to put all sites in compatibility view by default;
• whether IE thinks the site is on your intranet and so defaults to compatibility view;
• whether the site in question is in Microsoft's own list of websites that require compatibility view.

You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.

As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

or the HTTP header:

X-UA-Compatible: IE=Edge

to get the latest renderer whatever IE version is in use.

Answer 4

I went with the solution of adding the X-UA-Compatible header/meta tag with ID=edge. It's still unclear to me why several users, including me, went into compatibility mode. Seems quite random going off the responses here.

It's not my favourite option but it's done now. I already updated the website with it. Also a great tip of pressing alt to get to the tools menu.(I'm usually not an IE user so some things are a mystery to me)

Thanks all!