Why does IE9 switch to compatibility mode on my website?

196
votes

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.

8
htmlcssinternet-explorer-9compatibility-mode
Please explain "jumps into compatibility mode"? If you see the page refresh and a balloon that says that IE has refreshed this page in Compatibility View due to a problem, this means you've found an IE bug called a "hard assert" which is similar to a crash in the rendering engine. We're interested in finding and fixing these; please file a bug at connect.microsoft.com/ie. Thanks! – EricLaw

8 Answers

263
votes

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.

33
votes

I put

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

first thing after 

<head>

(I read it somewhere, I can't recall)

I could not believe it did work!!

21
votes

To force IE to render in IE9 standards mode you should use

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

Some conditions may cause IE9 to jump down into the compatibility modes. By default this can occur on intranet sites.

6
votes

I've posted this comment on a seperate StackOverflow thread, but thought it was worth repeating here:

For our in-house ASP.Net app, adding the "X-UA-Compatible" tag on the web page, in the web.config or in the code-behind made absolutely no difference.

The only thing that worked for us was to manually turn off this setting in IE8:

enter image description here

(Sigh.)

This problem only seems to happen with IE8 & IE9 on intranet sites. External websites will work fine and use the correct version of IE8/9, but for internal websites, IE9 suddenly decides it's actually IE7, and doesn't have any HTML 5 support.

No, I don't quite understand this logic either.

My reluctant solution has been to test whether the browser has HTML 5 support (by creating a canvas, and testing if it's valid), and displaying this message to the user if it's not valid:

enter image description here

It's not particularly user-friendly, but getting the user to turn off this annoying setting seems to be the only way to let them run in-house HTML 5 web apps properly.

Or get the users to use Chrome. ;-)

1
votes

The site at http://www.HTML-5.com/index.html does have the X-UA-Compatible meta tag but still goes into Compatibility View as indicated by the "torn page" icon in the address bar. How do you get the menu option to force IE 9 (Final Version 9.0.8112.16421) to render a page in Standards Mode? I tried right clicking that torn page icon as well as the "Alt" key trick to display the additional menu options mentioned by Rene Geuze, but those didn't work.

1
votes

As an aside on more modern websites, if you are using conditional statements on your html tag as per boilerplate, this will for some reason cause ie9 to default to compatibility mode. The fix here is to move your conditional statements off the html tag and add them to the body tag, in other words out of the head section. That way you can still use those classes in your style sheet to target older browsers.

0
votes

Looks fine to me:

alt text

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.

0
votes

I recently had to resolve this issue and here's what I did :

First of all, this solution is around tuning Apache server.

Second main think is that there's a bug in the IE9 which means that the meta tag will not work, instead of this solution try this

  • find/open your httpd.conf

  • uncomment/or add the following line

    LoadModule headers_module modules/mod_headers.so

  • add the following lines

    <IfModule headers_module>
    Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>

  • save/restart your Apache server,

  • browse to your page with IE9, use tools like wireshark or fiddler or use IE developer tools to check the header is there