Since Internet Explorer (IE) 8 Microsoft have supported a ‘Compatibility View’, allowing users to view web pages as if they are using a lower version of IE, normally IE 7. It appears in the top right of IE 8, 9 and 10, stating that it will make websites designed for older browsers look better. This has now been hidden in IE 11 (preview) but the functionality still exists through the menu tools.
For me this is where the questions/problems start. What older browsers? Why would new versions of IE not be backwards compatible? If I use this am I going to loose any functionality the new browser offers? Will it look and act exactly the same as when viewed in a native browser it is trying to emulate? Why does this not appear on all websites?
This post will aim to remove all of these uncertainties regarding IE’s Compatibility View and detail how as developers we can control this behaviour using the ‘X-UA-Compatible’ meta tag or header.
Compatibility View
When the default Compatibility View is enabled manually in either IE 8, 9 or 10 by clicking the icon on the address bar, the browser will attempt to behave as if you were in IE 7. When the browser attempts to emulate IE 7 it will:
- Use IE 7 Standards mode for standards mode document
- Send the IE 7 User agent string
- Sets the right internal parameters to process conditional comments as IE 7 would.
The site will be added to the Compatibility List accessed through the tools menu of each browser. It is worth noting that the site is added based on the domain name, excluding any sub domain or URL path, meaning that any site hosted on that domain will be displayed in Compatibility View until removed from this list.
The default setting has Compatibility View enabled for all intranet sites only, with a setting to enable it for all sites. But what does ‘Download updated compatibility lists from Microsoft’ exactly mean? After some research I discovered Microsoft collates a list of high volume sites where users turn on Compatibility View, and this option will download that list and enable Compatibility View automatically when using these sites. If you want to know more the IE Support Team wrote a blog about the list and on the support site there is a description of how it is compiled.
As stated previously Compatibility View handles websites as if opened in a older browser, but it will not behave exactly the same as the native browser. At the release of IE 8 in 2009 a blog post was published on the IE Blog detailing how IE 8 compatibility view was different from native IE 7. The differences are significant, impacting areas such as; CSS rendering, processing of JavaScript functions and properties, and many many more! This behavior has not changed with the subsequent release of IE 9 and 10.
So as developers we want to support as many browsers as possible, with Compatibility View available on your site the number of IE versions has increased by 3. This is a burden on development, testing and to be frank is just completely over the top. The only way to tackle this issue is to be in control of how your site behaves.
X-UA-Compatible
We can control how IE Compatibility View will behave through the use of a meta tag or custom header. Using any of the below options will hide the compatibility view icon from the user and handle the page as dictated.
Meta Tag
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7">
The meta tag has to be placed in the head tag, and can only be preceded by the title. If you place any other tags such as <style> or <script> before the meta tag it will not recognize your tag and revert to the default behavior.
IIS 7 Custom Header
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
A complete list of custom headers has been posted on stack overflow. The possible values that can be used as the value/content are listed below.
- “IE=edge”
- “IE=10”
- “IE=EmulateIE10”
- “IE=9”
- “IE=EmulateIE9
- “IE=8”
- “IE=EmulateIE8”
- “IE=7”
- “IE=EmulateIE7”
- “IE=5”
- “chrome=1” – The browser will use chrome frame if it is installed and will override any of the settings above (now discontinued)
This tells the browser which version of IE you wish your site to be rendered in. These can be used individually or together. If multiple options are provided the highest one for the active browser will be used. If a single value is provided it will be used, unless it is not available and then the active browsers standard will be used. If you prefix the version number with ‘Emulate’ and have no doc type this implies quirks mode, if you would like more details about the different modes Microsoft have described exactly how each of these behave.
Implementation
On a new site I would always use IE=edge as it will render the site in the newest possible version of IE and remove any uncertainties by hiding the compatibility view icon. However Microsoft does not recommend this and instead suggests just having a HTML 5 doc type, which will force your website into standard mode. The HTML 5 doc type will not hide the compatibility view button and is the reason I still include the meta tag with edge.
For sites that have been active without any X-UA-Compatible defined it is not that simple. Users may have already enabled Compatibility View and may have even been encouraged to use this view until the site supported newer browsers. You can still provide the X-UA-Compatible information and it will force the page out of Compatibility View and hide the icon. I have recently discovered that it does not completely force the site out of Compatibility View.
Agent String Bug
I have used two indicators to identify if the browser has been forced out of Compatibility View, ‘document.documentMode’ and the content of the agent string.
The JavaScript property ‘document.documentMode’ indicates what IE version is being rendered on screen in IE 8, 9 and 10, it is undefined within IE 7 or lower and any other browsers.
Using these I documented the behavior in the standard mode with Compatibility View on, then with it on prior to adding U-XA-Compatible information, and finally with it off prior to adding added U-XA-Compatible information.
The results are very concerning when Compatibility View is on prior to implementing the U-XA-Compatible information. It appears that the browser is rendering the page in the active browser version, yet the agent string is still indicating that Compatibility View is on. The user will likely see no difference, but this is a serious issue. This will cause any server side logic that is browser specific to run incorrectly, as well as misreporting in any web server logs. I have not seen this issue reported anywhere else and came up with two solutions.
The first and most simple solution is to manually remove the domain from the Compatibility View List found under Tools, Compatibility View Settings. The agent string will now report correctly. This requires every user that had Compatibility View on to take this action, I think this may be unrealistic.
The second option is to have a page on your site (preferably a login page if you have one) where the meta tag has not been included. We can use ‘document.documentMode’ to see if Compatibility View is on (if it equals 7 it is on) and then display a message to the user informing them that ‘Compatibility View is not supported on this site’, or even block them from taking any action until they turn this off. I went with the option to allow the user to continue but warned them strongly against it, I did this because some users (such as corporate) do not have complete control of the Compatibility View List.
Frank Code 
i have installed IE11 browser.. my web apllication works only IE11 compactability view.. if suppose im working on IE11 standard mode it does not support for some kind of operations.. (ie., cannot properly select dropdownlist values..) how to configure for that??
You will have to investigate why your drop down list does not work in native IE11. A native drop down list will always work.
Thanks for sharing, I had always wondered about the very things you have written about. I use IE11 on all my devices. It is the little things that make a big difference.
i am also facing few issues related to IE 11. In IE11 browser my telerik radcombobox is not working properly. When i am typing text the tet is not displayed instead “X” mark displays in center. When i uncheck the Display intranet sites in compatibility view the racombo box works fine but it created some other issues. Any idea how we can fix this.
So when you are running your site locally it is in compatibility view, as stated un-checking that box makes it run in native browser mode. If you plan on adding the settings I have described here, I would always un-checked the setting and fix the other issues.
Great! Congratulations!
I have a web application whose jQuery methods choke in IE9, when displayed in Compatibility Mode. They work fine in Standards Mode, though. I have added the X-UA-Compatible header to the HTTP response (the site hosting it runs on IIS 7), made an HTML5 DOCTYPE declaration, AND added an X-UA-Compatible meta tag to the section, before any other tags. In the vast majority of cases, it forces the client’s IE9 browser into Standards Mode. However, we are still running into cases of IE9 users whose browsers are displaying the page in Compatibility Mode. Is there anything else I can do to force IE9 in Standards Mode?
That is an interesting/annoying problem. The short answer is there is nothing more you can do to force it out from your end. However I have some ideas.
Possibly the users that work did not have their browser in CV before adding the header and the others did. This is similar to the agent string issue I detailed above. If the user removes the site from the CV list the problem may go away.
I have had different behaviour using headers rather than ‘meta’ tags. It is defiantly worth adding the tags and seeing if this fixes the issue.
Let me know how you get on.
I display a image text with some relative positions using style and left or right parameter specifying a position
in IE8 the code works find where the text image is displayed with style right:100 where the end of the text image is displayed at 100 and placing image at right position from 100px
same code in ie10 and above does not identify the right parameter or ignores it ( no ideas ) but does not place it to right from 100px . instead place the image staring from 100px from right boundry instead placing it to the left ending at 100px from right
Tried placing to make it run webpage in ie8 compatibility mode but does not have any effect on same.
any idea?
This is really fascinating, You are an excessively professional blogger.
I’ve joined your rss feed and stay up for in search of
extra of your great post. Also, I have shared
your site in my social networks
You should take part in a contest for one of the finest blogs on the net.
I most certainly will highly recommend this blog!
Thank you, that is very kind.
That’s not a spam comment to get a link back is it?!!
Hey! This is my first comment here so I just wanted to give a quick shout out and tell you I
truly enjoy reading through your articles.
Can you suggest any other blogs/websites/forums that deal with
the same topics? Thank you so much!
Thank you. Your note that the meta tag has to go on top of the header without any preceding scripts saved my day!
So I’ve been looking at this meta tag trying to fix my problem for an hour and had given up on it. Your thorough post mentioning where the meta tag had to be placed fixed my problem. The clouds parted. Angels sang. The unicorn made peace with the bigfoot, and all is right with the world.
Hi there, all is going perfectly here and ofcourse every one is sharing data, that’s in fact fine, keep up writing.
Hello! I have an intranet site that I wish to render in IE11, or whatever the latest is. I keep up with standards, so I’m not afraid of the site being rendered in the latest and greatest browsers. The environment here is pretty controlled, so let’s assume all users are on IE11 already. It’s a nice scenario.
I notice “Display intranet sites in Compatibility View” is checked by default. HTTP_USER_AGENT requests return “…compatible; MSIE 7.0;…” While navigator.userAgent returns “…compatible; MSIE 10.0;…”
I’m guessing that means I’m being reverted to Compatibilty View because of that Compatibility View setting, even though I’m using IE11, am I right?
Every attempt at overriding that with a meta tag (X-UA-Compatible) is being ignored. The site renders in Comp. View every time unless a user unchecks that box. What’s worse is, it rechecks when they log onto the network again. Is there a way to override that checkbox with site programming? Or, is this something I need to worry about at all? Is it fine to just leave it? Thanks!
Sorry, somehow I missed your comment, todays reply inormed me. I do not believe that you can programmaticly un check the intranet setting. You could give user a warning, but if it reverts after every login it could get annoying. I guess the only option is to investgate why this is checked by default. Hope you solved it.
Thanks for the reply. Great conversation going on here too. 🙂
Looks like my problem still lingers around. We’re all using IE11, and I wish to have the site display using latest standards (edge?) but alas, the “Display intranet sites in Compatibility View” is checked but our IT’s policy. Using the X-UA meta tag seems to have zero effect, and there’s no way to programmatically override the setting.
F12 / Emulation says the document mode is Edge, but Console shows the site is running and compatibility view because of the checked setting.
This leaves me as the developer without control over how the site is supposed to behave.
Josh, I have the same issue. Unfortunately the system that we are supporting is too old and is using very old MS TabStrip control, which rendering depends on the user-agent string. I believe this is very rare situation, but I guess you should worry if you have any 3d party components
są podatne przedstawić suma hec małżeńskich, plenarnie spośród cielesnymi, jeśliby obliczają że zadanie się na nie dostarczy im sztywną
zaleta. Stanowią ogromnie beznamiętne a jeżeli no więc umiem
ukraść – nieugięte. W 4 wypadkach na 5 poufale zaabsorbowane wybawieniem uprawnień do skumulowanego skarbu.
Hi,
Great blog post and very helpful. Our new website, developed this year, has been switched in place of our old site, and as such is using the domain name of the old site.
The problem is, the new site is now not displaying correctly in some browsers (IE), despite the fact that it worked on the test site (which had a unique domain name) in browsers IE 9 and later.
I think that the old site must have been saved in some people’s compatibility lists (as it was such an old site) and that this legacy has prevented the new website from displaying properly.
This is evidenced by the fact that hard clearing the history and cache etc or removing it from the list solves the view issue.
My questions are: does my theory sound correct? and is it easy to develop a message to the user informing them that ‘Compatibility View is not supported on this site’, or would that be a costly (aka lengthy) process to ask of the dev team?
Just one thing I have noticed too is that some application servers will insert scripts and styles into the head of the document. If the META X-UA tag isn’t the first thing in the head, it does not appear to work.
Great … thanks again, Tom.
Great information. Appreciate all the research and your detection suggestion as opposed to assuming users will not have Compat turned on.
I’m in IIS7 with IE9/10/11 + Chrome and a lot of Telerik controls that only work if Compat is off, which is fine. Some pages have but others still have old original values. At Telerik’s suggestion, I added IE-Edge to web.config. All systems have a login page.
I think my best approach is to:
1. Insure all pages use
2. Remove IE-Edge from web config and instead place in every page except login pages.
3. In Login, use JQuery to detect a problem user and warn them to either turn off Compat or contact our help desk.
Right?
Also .. sample JQuery would be appreciated … one less thing I can screw up 🙂
Thanks
Hi Larry, I am glad the post has proven useful to you. I have implemented the JS message in a very simple manner in the past:
if (document.documentMode === 7) {
document.getElementById(‘compatbilityWarning’).style.display = ‘block’;
}
Something such as above can be used to check if compatibility view is on, and then display a predefined (and hidden) message to the user.
Hmmm … I see that some information did not make it into this post, probably because I copy/pasted HTML.
“some pages have doctype html but others have older doctype stuff”
“1. Insure all pages use doctype html (per MS suggestion)”
Detection is not working. I have IE10 in Compat-mode … verified by pf12 which shows “Browser Mode: IE10 Compat View”.
Yet this code shows me “IE10” instead of “Compatability”.
function CheckBrowser() {
var text = “”;
if (document.documentMode === 7) {
text = “Compatability”;
} else {
text = document.documentMode;
}
document.getElementById(“demo”).innerHTML = text;
}
Suggestions?
I’m using IE 10.0.9200.17457, running out of VS2013 and forced on Compat via Tools Add-localhost to list of websites.
(actually just shows me “10” … not “IE10”)
oops … single = won’t work (duh) … double = shows me “10” all the time, even though PF12 shows me its definitely in compatability mode.
Is there anyway to detect that Compat is on?
Never mind … retried with single = and worked fine. 🙂
Got it! I still had web.config forcing it off. So it really was off, even though PF12 showed it on. Works great now. Thanks again!
Im using IE11 and dropdown option on screen touch does not work on finger scroll. Please fix my issue. the problem occurs because of meta tag. and iam unable to fix
Hi, please direct you issue to the IE team. Not something I have any control over.
It’s impressive that you are getting thoughts from this article as well as from our argument made at this time.
Hi,
I am using an application which loads my custom solution in an internal frame. It was working well in IE9. When our users upgraded their IE browser to IE11, few validations triggered through onblur/onchange are not being triggered because of which data is not being saved.
I tried to use the meta tag for it, but it doesn’t work. If I open the custom application in a new window or tab, it works fine.
Please guide me how I can trigger the validations in IE 11 using the meta tag.
Thanks,
Sherry.
Hi Sherry,
As long as you have the meta tag placed at the top of the head section in both the containing page at the one rendered in the frame, this should work as expected. Sorry cannot be more help, if you are still struggling then I would recommend raising a Stack Overflow question with a JS fiddle example.
[…] A Guide to IE Compatibility View and X-UA-Compatible […]
I have a struts application which is working fine with all the versions of IE, But i have a problem with IE-11. If i add my website url to Compatibility View List (Tools->Compatibility View Settings) then application is working fine. If i removed my application url from Compatibility View List that means compatibility off mode then it is not working. Adding the url to compatibility view list is not the solution for me, i need a solution which should not be ask user to change his browser settings. I need to change the compatibility mode off from application side, not from the user side. Can any one give the solution for this issue, it will be helpful for me. Thanks in advance..
Have you ever considered publishing an e-book or guest authoring on other blogs?
I have a blog centered on the same ideas you discuss and would really like to have
you share some stories/information. I know my visitors
would value your work. If you’re even remotely interested, feel free to send me
an email.
Is there an option to always have IE11 to stay check marked in “Display Intranet sites in Compatibility view”; i have some sites at work which is compatible with old IE version but to run those sites, i always to check mark it to this Compatibility View settings, and this check mark doesnt stay for long. I believe after 5-6 hours, the check box is disabled, and i have to check mark again.
If there is a way in setting to make it marked all the time, that would be awesome. Thank you in advance for your help!
Hi Raheel. It doesn’t sound like you are asking about programmatically setting this within the website, which is what this article covers.
I do however suspect that your problem is an IT policy set by a system admin, which resets your settings. Speak to your IT admin for help.
Hello to all, it’s genuinely a good for me to visit
this site, it consists of important Information.
This kind of game gives a real experience of building a aeefedekkdfbfbka
My applet gets loaded perfectly in IE 11 default behavior. But when I use meta tag and change it to render in IE 10, it does not load properly. Reason being meta tag has changed the document mode of IE to 10 but still the “user agent string” is pointing to IE 11. When I manually changed the “user agent string” to IE 10 it works fine again.
So is there a way where I could specify the user agent string also just like document mode in my HTML?
Thanks in advance!
Sorry but I have found no way to achieve this.
Ie11 not loaded button font in mysite. it’s working earlier version Ie11.i used and also tried using in web.config. working fine in all versions except IE11. Please hep me
meta content=”IE=edge” http-equiv=”X-UA-Compatible
How can I turn off Browser Compatibility on IE11 from IIS permanently ?
from IIS 8.5.9600
I am unsure if you can. It has been some time since I looked at this. Is it not plausible to change the pages themselves and have the meta tag?
Hi,
Iam using IE11 browser.If iam select compatablity mode my screen is not opening.If i removed the compatablity mode its working.But how can i achive this in IE lower version.They required compatablity mode on.Kindly suggest i need to support all kind of versions.
Hi,
I have one doubt. When the user is using particular page in that page the user is need to set compatibility view setting. After completing the action in that page the user need to disable the compatibility view setting. Is there any way to write java script code for particular page need to set compaibility view setting or not. Please help me. I have tried with tag it is not working for me. Really is it work ?
I see you don’t monetize your website, don’t waste your traffic, you
can earn extra cash every month. You can use the best adsense alternative for any type of website (they
approve all websites), for more info simply search in gooogle: boorfe’s tips monetize your website
[…] https://frankcode.net/2013/10/17/a-guide-to-ie-compatibility-view-and-x-ua-compatible/ […]
doctors in lawrence ks http://commbox.com.br/comprar-androgel-brasil-pfz.php best prescription anti aging products