Why does IE9 switch to compatibility mode on my website?

Asked 16/9, 2010 at 11:52 Answered 25/2, 2015 at 13:41

Solved html css internet-explorer-9 compatibility-mode

196

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.

Olatha answered 16/9, 2010 at 11:52 Comment(1)

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! – Unamuno 1/10, 2010 at 14:31

263

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.

Isotropic answered 16/9, 2010 at 12:25 Comment(19)

Important note: if IE 9 is configured to always show Intranet sites in compatibility mode, neither the meta tag nor the HTTP header will override that. – Drag 7/4, 2011 at 19:40

As Jacob mentions, IE can default to displaying all local/intranet sites to be in compat mode. Press alt -> Tools Compatability View settings, and make sure you don't have the box checked. – Voracity 15/8, 2011 at 20:27

The meta tag only worked for me when I put it right after <head> (see also the answer below). When I put it further down within the <head> element, it didn't work (I still got the torn page). – Changeless 3/2, 2012 at 12:27

Although it's certainly easy enough to check the options mentioned above another way that this manifested itself was that localhost and http://[MachineName] rendered differently. Localhost is apparently not considered an intranet site for IE9's compatibility purposes. – Leek 24/2, 2012 at 14:44

@Boris van Schooten: I'd have given you 100 upvotes if I could; I was tearing my hair out over this. – Lindstrom 23/4, 2012 at 18:30

@Jacob: You're right. I couldn't get this to work on my intranet site either. The only option would be to have every user manually change this default setting in IE (which is never going to happen). Not cool that Microsoft has boxed me into browser "compatibility" from 2006 with no programmable solution or way out of this. – Bluecoat 8/5, 2012 at 20:23

@Jacob: That's kind of misleading. Yes, you will be in compatibility Browser Mode and there's no way out. But you can still use the HTTP header to set the Document Mode to which ever version of IE works the best for your site. IE=Edge should always give you the latest rendering engine. So even if you're technically in compatibility mode, you can have your pages rendered as if in normal mode. Correct me if I'm wrong but at least our Intranet site works exactly like this (even with the "Display intranet sites in compatibility view" setting checked). – Iatric 24/8, 2012 at 8:58

@CoryMawhorter: Thank you so much for this! I was looking everywhere the for real "Tools" menu, which is front and center in IE8, but hidden in IE9 (the "gear" is not the Tools menu in IE9). I'd completely forgotten that hitting Alt shows the real menus. – Spiniferous 19/9, 2012 at 23:33

@BorisvanSchooten: I don't know if this is the reason why, but <meta> tags need to be within the first 512 bytes of a processed HTML file. I say "processed" because you can have all kinds of PHP up there, but the rendered code is what's important. I've gotten to where I put all of my comments about <meta> below the <meta> tags, so that I don't break the requirement. – Sussex 16/10, 2012 at 3:44

@BorisvanSchooten: Also, I just found out that it has to be before any downloaded content (like favicon) from this msdn blog. – Sussex 16/10, 2012 at 3:51

If you can use the HTTP header it is slightly better for performance because it avoids a potential browser parser restart. – Philipphilipa 19/4, 2013 at 11:55

I posted an answer just under this one as I tried this solution but it doesn't really work. see my answer – Woodworking 26/4, 2013 at 21:41

we jsut had a case where console.log () statments left in seem to trigger IE9 compatiblity mode, despite IE = edge meta being there. – Colly 24/2, 2014 at 13:6

@Iatric The browser setting trumps all. i.e. if the Browser has Tools > Compatibility View checked then both the HTML header and HTTP header are overridden. – Chlorohydrin 5/8, 2014 at 15:4

@SnowCrash In IE-11 the meta tag prevents an intranet site from rendering in IE-7 mode, even with the compatibility view setting turned on. – Orvas 22/8, 2014 at 15:53

@ToddRopog that did not happen when we tried it. i.e. with Compatibility view on it rendered in IE7 mode even with the meta tag set in the HTML. – Chlorohydrin 29/8, 2014 at 8:39

I have been searching off and on for a while now trying to get the style max-width to work properly and this did the trick for our intranet. Hopefully it will work on one of our apps once it goes live on the internet... – Fremantle 30/12, 2014 at 18:38

This must be the first metatag in the head section. – Soll 9/2, 2015 at 7:22

The intranet settings in IE9 that Jacob mentioned is what got me. I have the X-UA-Compatible meta tag as the second meta tag under the head tag and it works fine for me once I unchecked the intranet option. – Abyssinia 22/12, 2015 at 15:46

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!!

Manatee answered 17/3, 2011 at 15:41 Comment(3)

You have to close the tab and open a new tab, did you try that? – Arsonist 22/9, 2011 at 10:47

He said "did" not "didn't" ;) – Ossetic 16/8, 2012 at 19:32

+1, this is a very valuable note. If you have <script>s inside <head> before this meta statement, it (IE=edge) will be ignored. – Yolondayon 28/9, 2012 at 15:2

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.

Gloria answered 16/9, 2010 at 12:0 Comment(5)

It works in the other website. So that shouldn't be it. Also, that meta-tag is evil since you'd manually have to update it every time there is a new IE version. – Cheerless 16/9, 2010 at 12:16

Sorry I can't fix your problem. However, I've edited my answer to use IE=edge instead, which invokes the use of the latest engine available, always. – Gloria 16/9, 2010 at 12:18

Your assumption is incorrect. The demos specify X-UA-Compatible to prevent IE from showing the Compatibility View button since if the user pushes it, the site content would not work correctly. – Unamuno 1/10, 2010 at 14:30

@ReneGeuze, you got it wrong. Edge always refers to the latest version of IE. – Inexplicable 9/3, 2012 at 14:25

@DelanAzabani my intranet portal switch to compatibility mode even i added meta tag as you suggested. please suggest how it could resolve and remain on standard mode example - IE 8, IE 8 comapitibility then i want IE 8 only. – Grits 25/2, 2014 at 11:1

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. ;-)

Dulla answered 13/2, 2014 at 9:27 Comment(0)

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.

Keenankeene answered 18/3, 2011 at 19:33 Comment(1)

Remove the IE conditional comment around the meta. You are serving the page as application/xhtml+xml, so XML parsing rules are used; XML does not support conditional comments. In any case it doesn't make any sense; the browser must choose a mode before it can decide what conditional comments to interpret. – Isotropic 3/2, 2012 at 13:45

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.

Interleave answered 25/2, 2015 at 13:41 Comment(0)

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.

Poacher answered 16/9, 2010 at 12:7 Comment(2)

I had more than 1 report of this error. Though maybe it has to do with the base dir ( alliancesatwar.com ) that it renders all sub-dirs in compatibility mode as well. But then I have the question, what in the root of the website makes IE render the website in compatibility mode? So maybe at least this guide is coded right. I hope so then. – Cheerless 16/9, 2010 at 12:18

@Rene Strange, I just reproduced it, by clicking on the Guide link from the homepage. But this only happened once, and after a few attempts I have yet to reproduce this, just that once only – Poacher 16/9, 2010 at 12:28

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

Woodworking answered 30/11, 2012 at 14:56 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags