Force IE compatibility mode off using tags

Asked 10/8, 2010 at 13:13 Answered 13/7, 2018 at 18:35

383

I am doing work for a client who forces compatibility mode on all intranet sites. I was wondering if there is a tag I can put into my HTML that forces compatibility mode off.

Brownlee answered 10/8, 2010 at 13:13 Comment(6)

I think that the answer you are looking for is here : #1015166 – Thorvald 10/8, 2010 at 13:18

Actually I was looking for the exact opposite, who sets their standard to compatability mode, thats just insane. – Brownlee 10/8, 2010 at 13:57

Bad javascript on a legacy app that crashes on anything other than IE7, that's who sets their standard to compatibility. One day, we'll get around to replacing it... – Precipitation 8/8, 2011 at 12:55

related #6771758 – Abiosis 6/6, 2013 at 12:6

@petethepagan-gerbil did you get around to replacing it? :P – Lincolnlincolnshire 11/12, 2018 at 7:51

@Lincolnlincolnshire I left the company over 6 years ago :) We made small improvements to remove the issues whenever we had a change in the same area, but tech debt was never prioritised there. Don't know if it ever got fixed in the end. – Precipitation 11/12, 2018 at 8:40

547

There is the "edge" mode.

<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>My Web Page</title>
   </head>
   <body>
      <p>Content goes here.</p>
   </body>
</html>

From the linked MSDN page:

Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the “lock-in” paradigm. With Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to Edge mode would appear in the highest mode supported by that version; however, those same pages would still appear in IE8 mode when viewed with Internet Explorer 8.

However, "edge" mode is not encouraged in production use:

It is recommended that Web developers restrict their use of Edge mode to test pages and other non-production uses because of the possible unexpected results of rendering page content in future versions of Windows Internet Explorer.

I honestly don't entirely understand why. But according to this, the best way to go at the moment is using IE=8.

Philter answered 10/8, 2010 at 13:17 Comment(12)

This is actually good to use with Chrome Frame plugin. It removes the "compatibility" button from IE. I'v had issues where I want to use Chrome frame with IE8 and below but then someone using IE9 has the compatibility button set on as default and they end up being forced to install Google Chrome Frame when they don't need it. – Ailanthus 30/3, 2012 at 20:5

As of 8/6/2012 Microsoft appears to be using IE=10 on their own sites. If you've tested your site in IE10 (preview version), it's safe to use this; otherwise, you may want to stick to IE=9 for now. – Latty 7/8, 2012 at 1:0

I have found that this does NOT work if the user (or the sysadmin) has turned on compatibility mode as a default by going to Tools->Compatibility View Settings, and checking Display all websites in Compatibility View. To fix the problem, I have to return the header in the HTTP response: X-UA-Compatible: IE=edge – Geber 19/4, 2013 at 11:29

+1 to speedplane - IE10 compatibility mode is ON by default for intranet sites - UGH...thanks for the find! – Trophozoite 11/6, 2013 at 17:58

Word of advice for those who find this answer, but are unable to get it to work for them. The compatability meta tag MUST be the first meta tag, and there can be NO IE conditional statements before the tag. More: tesmond.blogspot.com/2011/10/… – Genseric 19/8, 2013 at 20:23

Thank you Chris! I was struggling with this for 30 minutes when I finally read your comment. I didn't have it first. – Ky 26/9, 2013 at 2:34

@Geber how exactly do you return the header in the HTTP response? I'm note sure how to do that. – Rosalie 2/10, 2013 at 10:29

@Sumit it depends what type of server/stack you are using. If php, try googling, how to return HTTP headers in php. If django, try how to return HTTP headers in django... etc. – Geber 9/10, 2013 at 4:39

Note, this does not force IE11 in enterprise mode (IE8 compat) into any different rendering modes. IE11 in compatibility mode is indeed forced to upscale. – Farr 12/11, 2015 at 19:57

Any update if Edge mode is still not recommended for production use? – Racism 7/9, 2017 at 8:8

it'd surprise me that it would not be recommended as there is no newer IE coming out anymore.. – Ferrite 6/11, 2017 at 8:30

Microsoft web site is using content="IE=edge" now, so it must be recommended now! – Pub 4/6, 2019 at 12:29

After many hours troubleshooting this stuff... Here are some quick highlights that helped us from the X-UA-Compatible docs: http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx#ctl00_contentContainer_ctl16

Using <meta http-equiv="X-UA-Compatible" content=" _______ " />

The Standard User Agent modes (the non-emulate ones) ignore <!DOCTYPE> directives in your page and render based on the standards supported by that version of IE (e.g., IE=8 will better obey table border spacing and some pseudo selectors than IE=7).
Whereas, the Emulate modes tell IE to follow any <!DOCTYPE> directives in your page, rendering standards mode based the version you choose and quirks mode based on IE=5
Possible values for the content attribute are:

content="IE=5"

content="IE=7"

content="IE=EmulateIE7"

content="IE=8"

content="IE=EmulateIE8"

content="IE=9"

content="IE=EmulateIE9"

content="IE=edge"

Arbiter answered 23/2, 2011 at 20:39 Comment(0)

If you're working with a page in the Intranet Zone, you may find that IE9 no matter what you do, is going into IE7 Compat mode.

This is due to the setting within IE Compatibility settings which says that all Intranet sites should run in compatibility mode. You can untick this via a group policy (or just plain unticking it in IE), or you can set the following:

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

This works (as detailed in other answers), but may not initially appear so: it needs to come before the stylesheets are declared. If you don't, it is ignored.

Cloutman answered 14/1, 2013 at 16:0 Comment(3)

thanks for the warning about the stylesheet, this was causing problems and i know the reason now! – Bithia 5/2, 2015 at 9:3

Yep, initially mugged by placement. Thanks for adding this. – Margaretmargareta 30/5, 2016 at 13:46

Thanks that was very helpful. They have a GPO that's setting the effective IE level at 7 even though IE 11 is installed. This saved me from having to put some shims in the site to get the js to work. – Paling 31/1, 2018 at 22:9

I believe this will do the trick:

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

Argillaceous answered 10/8, 2010 at 13:17 Comment(0)

As suggested in this answer to a related question, "edge" mode can be set in the Web.Config file. This will make it apply to all HTML returned from the application without the need to insert it into individual pages:

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

This same step can also be accomplished by modifying the "HTTP Response Headers" using IIS Manager for the IIS server, entire website, or specific applications.

Selfabuse answered 24/7, 2015 at 18:19 Comment(0)

The meta tag solution wasn't working for us but setting it in the response header did:

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

Flood answered 8/2, 2013 at 22:38 Comment(4)

+1 for the 'chrome=1'; I never knew about that. For what it's worth, changing it to IE=10 cleared up a number of rendering issues on my site that IE=edge had no affect on. – Incarnation 25/2, 2013 at 15:17

Explanation of the chrome=1 property, https://mcmap.net/q/88141/-is-it-still-valid-to-use-ie-edge-chrome-1. Bare in mind that Chrome Frame has been retired. blog.chromium.org/2013/06/retiring-chrome-frame.html – Stpeter 21/9, 2015 at 13:29

see comments on other answers... I have found that this does NOT work if the user (or the sysadmin) has turned on compatibility mode as a default by going to Tools->Compatibility View Settings, and checking Display all websites in Compatibility View. speedplane Apr 19 '13 at 11:29 7 The compatability meta tag MUST be the first meta tag, and there can be NO IE conditional statements before the tag. More: tesmond.blogspot.com/2011/10/… – Chris Sobolewski Aug 19 '13 at 20:23 – Farr 12/11, 2015 at 19:58

I tried to put it on the first line in layout page. It does not work, Stu mentioned changing IIS HTTP Response Headers. I tried. I restarted the app pool. I inspect more. This is page is nesting under other page. The other page does have another meta. This is the production website. So many people are accessing this page. putting this tag on top is mission impossible. Any other solution or I am screw – Michaella 5/11, 2018 at 22:24

IE8 defaults to standards mode for the intERnet and quirks mode for the intRAnet. The HTML meta tag is ignored if you have the doctype set to xhtml transitional. The solution is to add an HTTP header in code. This worked for us. Now our intranet site is forcing IE8 to render the app in standards mode.

Added to PageInit of the base page class (ASP.net C#):

Response.AddHeader("X-UA-Compatible", "IE=EmulateIE8");

reference: http://ilia.ws/archives/196-IE8-X-UA-Compatible-Rant.html

Flax answered 16/1, 2012 at 18:15 Comment(0)

Just a few more notes on this topic based on my recent experiences. The university I work for issues laptops with IE 8 set to compatibility mode for all Intranet Sites. I tried adding the meta tag to disable this mode for pages being served up by my site but IE consistently ignored this tag. As Lance mentioned in his post, adding a response header fixed this issue. This is how I set the header based on the HTML5 boilerplate method:

<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=edge,chrome=1"
  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...
  <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

In order for this header to actually be sent, you have to make sure you have mod_headers turned on in Apache. If you want to make sure you have this mod turned on, put this in a page that can run php:

<pre>
<?php
    print_r(apache_get_modules());
?>
</pre>

Aquilar answered 3/5, 2013 at 18:45 Comment(1)

The .htaccess method worked for me, in IE8+ It removed the compatibility button (a.k.a Enemy No. 1) and forces IE8 to avoid using compatibility mode. Related: The meta tag alternative only seems to work under certain conditions (IE Voodoo) on various computers. – Turnkey 6/12, 2013 at 9:51

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

Apparently it is not possible to change the compatibility view settings as a group policy but it is something that can perhaps be changed in the registry, this meta tag works fine for me, I had to make the required attribute work as part of a html form, it worked in chrome and firefox but not IE.

Here is a nice visual of what browsers support each individual html 5 element.

http://html5readiness.com/

Notice the one common denominator Google Chrome, it supports everything. Hope this is of help

Assign answered 24/9, 2013 at 10:46 Comment(1)

Looks like Firefox and IE 10 now support everything as well. Chart doesn't make that as clear as it does for Chrome. – Pentangular 9/6, 2015 at 15:20

If you have access to the server, the most reliable way of doing this is to do it on the server itself, in IIS. Go in to IIS HTTP Response Headers. Add Name: X-UA-Compatible
Value: IE=edge This will override your browser and your code.

Vilhelmina answered 12/10, 2017 at 13:47 Comment(1)

This resets on new deployment to IIS if set at the website level – Zamindar 16/10, 2019 at 18:32

Insert as the very first item under the tag.

This forces IE to render the page in the physical version of IE, and it ignores the Browser "Mode setting". This can be set in the developer tools, try changing it to a older version of IE to test, this should be ignored and the page should look exactly the same.

Catharina answered 20/8, 2015 at 1:55 Comment(0)

If you want each individual web page to load the chosen content and are using asp.net. Just apply it as the first tag under the heading tag in Views>shared>Layout.cshtml

just a tip

Shit answered 13/7, 2018 at 18:35 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