IE10 renders in IE7 mode. How to force Standards mode?

Asked 8/11, 2012 at 7:1 Answered 6/3, 2014 at 2:8

Solved windows internet-explorer windows-8 internet-explorer-10

121

On microsoft's site they claim that simple doctype declaration is enough. But even a document as short as this falls back to IE7 mode:

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>

</body>
</html>

http://d.pr/i/fvzb+

Pineda answered 8/11, 2012 at 7:1 Comment(0)

245

Internet Explorer makes the assumption that most webpages were written to target earlier versions of IE and looks at the doctype, meta tags and HTML to determine the best compatibility mode (sometimes incorrectly). Even with a HTML5 doctype IE will still place your website in compatibility mode if it's an intranet site.

To ensure that your website always uses the latest standards mode you can either make sure Display intranet sites in Compatibly is turned off. However you have to do this on each machine local to the web server (instructions are below).

Alternatively, and better yet, you can use the X-UA-Compatible header to turn this off from the server. It's important to note that using the meta tag will not work!

<!-- Doesn't always work! -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Throughout MSDN it's mentioned that using a host header or a meta tag should override even intranet sites. The article Understanding compatibility modes in internet explorer 8 says the following.

A large number of internal business web sites are optimized for Internet Explorer 7 so this default exception preserves that compatibility. ... Again if a Meta tag or http header is used to set a compatibility mode to the document it will override these settings.

However, in practice this will not work, using a host header is the only option that works. The comments section of the article also shows numerous examples of this exact issue.

Using a Meta tag also has several other issues such as ignoring the tag if it's not directly under the <head> tag or if there is too much data before it (4k). It may also trigger the document to be reparsed in some versions of IE which will slow down rendering. You can read more about these issues at the MSDN article Best Practice: Get your HEAD in order.

Adding the X-UA-Compatible header

If you are using .NET and IIS you can add this to the web.config, you could also do this programmatically:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-UA-Compatible" value="IE=edge" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

If you're not using IIS it's easy to do in any language. For example, here's how to do it in PHP:

header('X-UA-Compatible: IE=edge');

As long as the X-UA-Compatible header is present with the HTML5 doctype, a site will always run in the latest standards mode.

Turning off Compatibility View
It may still be useful to turn off Compatibility View. To do so untick Display all intranet sites in compatibility view in the Compatibility View Settings.

Compatibility View Settings

You can bring this up by hitting Alt to get the menu.

enter image description here

Edit This answer also pertains to IE9.

Rossierossing answered 8/11, 2012 at 10:31 Comment(18)

Pardon my ignorance, but how to get to this Settings sheet? I checked Internet explorer settings, right-clicked the compatibility view in address bar - nothing. – Pineda 8/11, 2012 at 16:20

@Nick use alt to bring up the toolbar, it's under tools -> compat view settings – Rossierossing 8/11, 2012 at 23:16

Oh thank you, looks like that solved it. Makes one wonder why did they do that at all. – Pineda 9/11, 2012 at 5:0

+1000 ;). SO should force every OP to see this answer, when they are having any [IE] tag and a word "compatible" in their question, even before they actually post that question. – Agnew 21/11, 2012 at 13:31

If you're using Apache, refer to the section "Set server level response header" – Chastise 18/7, 2013 at 21:49

+1 for sharing this. Huge help! Btw, does anyone know by any chance whether this option is checked by default? One of my colleagues claims that he never actually checked it manually but it was there (He is a Tester and this screwed the layout of our webapp and that's why I landed on this page in the first place :P) – Isotropic 25/7, 2013 at 6:21

@Nikhil Display intranet sites in compatibility mode IS checked by default. – Rossierossing 25/7, 2013 at 6:53

@Lavinski: Ohh! If that is so then the issue boils down to the developer's machines! We never unchecked it manually! :-/ Anyway, thanks a lot! – Isotropic 25/7, 2013 at 7:25

For a developer who doesn't have control over the header tags that are sent back (i.e. they do not administer IIS, have the right permissions, etc.) -- you can just put this in your HTML head element: <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> – Subulate 5/8, 2013 at 20:19

Meta tag wasn't necessary for me. Solution in this answer worked, but I had to restart IE. – Selfsatisfied 23/8, 2013 at 11:42

I tried adding the custom headers section to the project's web.config. It would appear that setting doesn't override the IE setting for using compatibility view for intranet sites. – Bridlewise 29/8, 2013 at 13:21

I had written custom JS and server side detection algorithms to figure out if compatibility mode was happening and then redirecting users to a page to allow them to disable it...this fixed everything. I wish I could upvote 10x times!!! Thanks so much. – Culbreth 23/9, 2013 at 20:16

Please note that (according to msdn.microsoft.com/en-us/library/jj676914(v=vs.85).aspx) both the meta tag AND the header solution will not override IE10's decision to use compatibility mode when accessing an intranet site. If anyone has a solution for this that doesn't require a change to all users's IE settings, I'm all ears. – Lampoon 23/5, 2014 at 14:35

The meta tag has always worked for me as long as it's the first tag in the head section or second only to <title> – Accommodative 11/8, 2014 at 15:36

You've said the meta tag "will not" (or "doesn't always") work, but you say nothing about why you say that, what evidence you have for it, etc. What's the genesis of those statements? Especially the strong "will not" which is flatly wrong: It absolutely does work in the normal case. If you know of edge cases where it doesn't, that would be useful information. – Trigonous 12/9, 2014 at 7:52

@T.J. Crowder regarding evidence there is little to no documentation on the issue but it's relatively easy to test for yourself. You may have missed that this answer pertains to intranet sites not just the general case which may be the link you are missing. Regardless I've added some more references which I think may help. – Rossierossing 15/9, 2014 at 0:11

@DanielLittle: I have tried it myself, with intranet pages, which is why I asked the question. It works just fine. You've said (even in the edit) that "...in practice using a host header is the only option that will work." but that's simply not correct: If the meta tag is early enough that the browser isn't committed to compatibility view (and within the first 4k, sigh), it does work. I've been happily using it after the meta charset and before title (which I see is also what Eric Law recommends in the article you linked; cool). – Trigonous 15/9, 2014 at 7:11

This does not work for me with IE10 and an intranet site (i.e. a web app in development). I have the header "X-UA-Compatible: IE=edge" and "<!DOCTYPE html>". IE is and always had been more trouble than every other browser put together. – Quoth 3/12, 2015 at 3:46

This works for me..

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

Soupy answered 24/5, 2013 at 9:41 Comment(6)

N.B. as Lavinski says above, "the meta tag doesn't do anything for intranet sites." – Ritz 4/6, 2013 at 18:40

For what it's worth, for a hosted website (non-intranet site) that has the X-UA-Compatible meta tag, yet still isn't triggering IE10 Standards document mode as Page Default, I found that if the meta tag is located below script tags or is just too far from the top of the <head> in the DOM tree, IE10 cries and sets the document mode to IE8 Standards. So, keep your IE=edge meta tag close the <title> tag. Not always a simple a fix for Wordpress sites when it's not hard-coded in the header template file. Not sure if IE11 cares where the meta tag is, but hope this proves helpful to someone. – Corelli 16/10, 2013 at 15:45

For blind copy and pasters such as myself, that is missing the closing tag. . <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta> – Touristy 7/1, 2014 at 18:0

You only need to close the meta tag if you are using the XHTML doctype – Courtyard 31/1, 2014 at 22:31

You could also just add a '/' before the closing '>' – Brahms 5/2, 2014 at 16:20

Also this tag needs to be the first tag inside <head> – Since 25/2, 2014 at 23:45

Try adding the following tag to the head

<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" />

Herne answered 8/11, 2012 at 7:5 Comment(8)

That should be IE=Edge instead – Rossierossing 8/11, 2012 at 7:53

But there's a risk that future versions of IE does something bad and breaks your site – Herne 8/11, 2012 at 9:5

No that's not a risk if you follow the spec, you don't see people doing that for chrome. – Rossierossing 8/11, 2012 at 10:14

I have tried with IE=Edge, didn't help. It's something else, but I don't understand what is it. – Pineda 8/11, 2012 at 16:21

This tag needs to be the first tag inside <head> – Since 25/2, 2014 at 23:45

+1, this approach works perfectly with http headers – Placard 6/3, 2014 at 2:8

The edit on this answer demonstrates why this is not a good idea. The accepted answer is the best solution. – Looper 7/3, 2014 at 21:19

My website suddenly breaks on Chrome due to the new version having stricter than RFC standard for parsing of CSS media queries. If I can specify a backward compatibility mode for Chrome, I would not have gone through the panic updating of all my sites. – Herne 8/3, 2014 at 13:20

The meta tag doesn't do anything for intranet sites and my issue was IE10 rendering in IE10 compatibility mode. What tackled the issue for me was taking @Jeow's answer further and using that value in an http header by adding the following to web.config under IIS:

<system.webServer>
  <httpProtocol> 
    <customHeaders> 
      <clear />
      <!-- <add name="X-UA-Compatible" value="IE=edge" /> not good enough -->
      <add name="X-UA-Compatible" value="IE=11,IE=10,IE=9,IE=8" /> 
    </customHeaders> 
  </httpProtocol>
</system.webServer>

For IE purposes, intranet sites include public-facing sites that are not routed to externally - for example a Stackoverflow employee working from the office would probably see stackoverflow.com in compatibility mode.

Placard answered 6/3, 2014 at 2:8 Comment(0)

It worked perfectly for me when i did the folowing:

On http://msdn.microsoft.com/en-us/library/gg699338(v=vs.85).aspx

Used the exact example they provide in the first box(added the missing </html> at the bottom), opened it in IE10 and standards was forced, i think you may need actual content in the html for it to force standards not sure though.

My suggestion would be to replace your empty code with actual content(something simple) and see what it does.

Hemipterous answered 25/2, 2014 at 17:17 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