Force Ie Compatibility Mode Off Using Tags

Force IE compatibility mode off using tags

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.

Force IE compatibility mode off in IE using tags for browser mode

You want IE=edge, it will force the browser to use the latest version it has (IE8 will act as IE8, not compatibility mode) and removes the button for compatibility mode. This will give the best results for AngularJS

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

Also, if you are running the site locally, IE will pick up on that and force compatibility mode on. You can change this setting in IE, go to Tools –> Compatibility ViewSettings -> Uncheck "Display intranet sites in Compatibility View".

Sample Image

How can I force IE to not use compatibility mode?

I work on the Internet Explorer and Microsoft Edge team.

What you provided is the x-ua-compat header/meta-tag. It is designed as a hold-over solution to help you move forward and adopt support for modern browsers, without having to immediately take care of modernizing your codebase. It is not meant as a long-term solution for web compatibility.

The best way to give your user the most ideal experience is to first use the HTML5 doctype:

<!DOCTYPE html>

That should be the first thing in your document; nothing should preceed it. From then on, use valid markup alone. Check your document for errors, unbalanced tags, redudant tags, etc. Remember, valid your markup regularly.

Only use the x-ua-compat header/meta-tag when you have legacy code that you cannot immediately replace/remove. In these scenarios, it is permissible to put your users in a legacy document mode:

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

The above will put the browser into Internet Explorer 9's Edge Mode, provided that mode exists. In versions of Internet Explorer prior to 9, the latest document mode will be used.

You can also stack these to show favor:

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

But please don't forget my primary message here - the above is meant only as a temporary solution. The ultimate goal is to get your document updated with modern code.

Microsoft Edge, Internet Explorer's successor, does not support document modes. Microsoft Edge will interpret your document like Firefox and Chrome do.

Forcing IE's Compatibility Mode off

In my opinion, the issue is related that you site belongs to the Local Intranet Zone. When you access the site from the office's network, it will mapped to the Local Intranet Zone.

So, when you checked the "display intranet sites in compatibility view" options and access the site from office's network, the site will in the compatibility mode. You could try to uncheck this option to disable the Compatibility View / Mode. Also, you could try to disable Local Intranet Zone.

More details, please refer to The Intranet Zone and How to turn off compatibility View / Mode in Microsoft IE10 and IE11

Can I disable IE compatibility mode only for content within a frame?

According to this & this (even better than the 1st - notice who marked the answer), a solution isn't possible.

If thinking about it for a second, IE's GUI is actually hinting that an entire page is rendered in compatibility mode (only 1 indicator icon per page, next to the address bar), so it's safe to assume everything is treated the same. Either full page compatibility, or not at all.

P.S. I know this isn't too helpful, but it's an attempt at providing a valid reason why it's not possible and it's better to start looking in different directions. Personally, I'd try to go with HTML5 (<!DOCTYPE html>). That CAN be enabled selectively (only on your frame) and might not be too hard to adjust to since you already use 'edge'...

How to disable Compatibility View in IE

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

should force your page to render in IE8 standards. The user may add the site to compatibility list but this tag will take precedence.

A quick way to check would be to load the page and type the following the address bar :

javascript:alert(navigator.userAgent)

If you see IE7 in the string, it is loading in compatibility mode, otherwise not.

How to force compatibility mode for all versions of IE?

Compatibility mode is meant to help users with old products that are not up-to-date. In no way it should help the developer to avoid the issues he may find.

Unless you absolutely have no choice (for example a broken dependency like SharePoint...) or want to expose a serious lack of competence, you should not force a user to see your page in compatibility mode.

If you need to support all IE versions, you must understand how each version works and be aware of each differences in order to make a code that can result in the same output no matter the version.

If the idea of mastering "crappy versions" (for example IE6 and older) sounds really bad to you, I would advise you to establish a threshold to concentrate on the compatibility with some old versions, rather than all of them.

EDIT: But if you really need to force compatibility mode, you can use the "X-UA-Compatible" meta tag. For example:

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

Force Ie Compatibility Mode Off Using Tags