197

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.

Benjamin Gruenbaum
  • 246,787
  • 79
  • 474
  • 476
René
  • 5,285
  • 3
  • 20
  • 37
  • 5
    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 http://connect.microsoft.com/ie. Thanks! – EricLaw Oct 01 '10 at 14:31

8 Answers8

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.

Kermit
  • 32,563
  • 10
  • 80
  • 117
bobince
  • 498,320
  • 101
  • 621
  • 807
  • 79
    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. – Jacob Apr 07 '11 at 19:40
  • 29
    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. – Cory Mawhorter Aug 15 '11 at 20:27
  • 30
    The meta tag only worked for me when I put it right after (see also the answer below). When I put it further down within the element, it didn't work (I still got the torn page). – Boris van Schooten Feb 03 '12 at 12:27
  • 1
    Although it's certainly easy enough to check the options mentioned above another way that this manifested itself was that http://localhost and http://[MachineName] rendered differently. Localhost is apparently not considered an intranet site for IE9's compatibility purposes. – Carth Feb 24 '12 at 14:44
  • 2
    @Boris van Schooten: I'd have given you 100 upvotes if I could; I was tearing my hair out over this. – LaundroMat Apr 23 '12 at 18:30
  • 1
    @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. – MikeTeeVee May 08 '12 at 20:23
  • 13
    @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). – mkataja Aug 24 '12 at 08:58
  • 1
    @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. – coredumperror Sep 19 '12 at 23:33
  • 7
    @BorisvanSchooten: I don't know if this is the reason why, but `` 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 `` below the `` tags, so that I don't break the requirement. – doubleJ Oct 16 '12 at 03:44
  • 1
    @BorisvanSchooten: Also, I just found out that it has to be before any downloaded content (like favicon) from [this msdn blog](http://blogs.msdn.com/b/jonbox/archive/2011/03/27/removing-the-ie9-compatibility-button-and-html1115-warning.aspx). – doubleJ Oct 16 '12 at 03:51
  • If you can use the HTTP header it is slightly better for performance because it avoids a potential browser parser restart. – PussInBoots Apr 19 '13 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 – Abderrazak BOUADMA Apr 26 '13 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. – Luke Barker Feb 24 '14 at 13:06
  • @mkataja 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. – Snowcrash Aug 05 '14 at 15:04
  • @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. – Todd Ropog Aug 22 '14 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. – Snowcrash Aug 29 '14 at 08: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... – Zath Dec 30 '14 at 18:38
  • This must be the first metatag in the head section. – Mandeep Pasbola Feb 09 '15 at 07: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. – HartleySan Dec 22 '15 at 15:46
33

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

pkario
  • 2,054
  • 3
  • 23
  • 30
22

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.

TodK
  • 1,079
  • 10
  • 17
Delan Azabani
  • 73,106
  • 23
  • 158
  • 198
  • 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. – René Sep 16 '10 at 12:16
  • 2
    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. – Delan Azabani Sep 16 '10 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. – EricLaw Oct 01 '10 at 14:30
  • @ReneGeuze, you got it wrong. Edge always refers to the latest version of IE. – neoswf Mar 09 '12 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. – dsi Feb 25 '14 at 11:01
6

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

Mike Gledhill
  • 23,658
  • 6
  • 133
  • 143
1

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.

uknowit2
  • 429
  • 1
  • 5
  • 20
1

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.

Rob at TVSeries.com
  • 2,144
  • 1
  • 18
  • 13
  • 4
    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. – bobince Feb 03 '12 at 13:45
0

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
Elrond_EGLDer
  • 47,430
  • 25
  • 189
  • 180
Abderrazak BOUADMA
  • 1,380
  • 1
  • 15
  • 38
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.

Yi Jiang
  • 46,385
  • 16
  • 133
  • 131
  • I had more than 1 report of this error. Though maybe it has to do with the base dir ( http://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. – René Sep 16 '10 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 – Yi Jiang Sep 16 '10 at 12:28