In my tests, this behavior spans various versions of IE ranging from the older IE7 and IE8, and the more modern IE9 and IE10.
So what exactly has been happening? I would write code on my local machine where it would run just fine. However when I would move it to a development server the scripts would mysteriously fail.
The image to the left shows the kind of error report I saw when trying to plug in a JQuery DatePicker. The JQuery code was minimal so I knew the problem was not with the code.
Here is the HTML for the test page I created to track down the problem. As you can see, the JQuery code is minimal and as the picture above shows, is a simple text box with an associated JQuery DatePicker.
I am using a local development machine that did not report an error and a development server that did. I am running IE9 as a test browser. When I ran the page from my local IIS I would not see the error, but when I would run the page via the local Intranet from the development server the error would always appear.
From what i could tell, somehow my browser would attempt to load my test page but would give an error when serving a page via the local intranet.
As it turns out this behavior is due to a feature that Microsoft added to it’s latest browsers called Compatibility View, which is enabled by default. Compatibility View is Microsoft’s way of maintaining its support for older coding standards and IE-only markup that was in common use a few years ago when people would code for IE6 and IE7.
Using the Compatibility View option in the IE9 Tools menu I was able to easily create the error condition and then remove it, so this was definitely the cause of the problem.
However, now the issue for me was that the users of the system I was coding for were all on the local Intranet and would be using IE with its default settings, which meant that everyone’s IE Compatibilty View would be enabled.
Luckily there is a direct way using meta tags to tell IE what IE version it should run under when presenting a document in Compatibilty View.
Using the meta tag below I was able to tell IE to emulate IE9. I added this meta tag directly below my <head tag, and it solved the problem of IE’s Compatibilty View being enabled by default.
<meta http-equiv="X-UA-Compatible" content="IE=9" >
If you want to support a number of compatibility modes, you can specify the range as an ascending order comma-separated list (shown below). IE will then choose the highest of the specified modes that it can support.
<meta http-equiv="X-UA-Compatible" content="IE=5,8,9" >
If you declare your HTML doctype header in the HTML5 standard, IE is smart enough to know that it should emulate IE9+ without needing a meta tag to tell it what to do. In this case, start your page with the following header tag:
If you are running a .NET site, you can specify the default Compatilbility View for your entire site in the CustomHeaders section of your Web.config file as follows:
<customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=9" /> </customHeaders>
Finally, if you have access to IIS, then you can specify the Compatibility View meta tag using a custom HTTP response header.
The modes that IE supports to date are for IE versions 5, 7, 8, and 9. While looking through the Microsoft documentation, I saw reference to setting the meta tag to something called Edge mode. One can use Edge mode to tell IE to always use the maximum possible compatibility mode supported by the browser. I tested using this setting and it did work to make IE scale up to IE9. Here is the code for the tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
Microsoft has added several emulation options that one can use to tell IE to run in a particular browser mode, which will be useful to know for the future.
Based on my online search I see that a lot of people have trouble with this new feature in IE. I am not sure if I consider it a good or a bad feature myself, but I can see that it could be beneficial for programmers since it gives them more control over the page they are providing. However, if the ability to specify a browser’s compatibility mode is to become a mainstream feature, then it needs to be implemented by other browser makers in order to avoid it becoming just another IE-specific quirk.
31 thoughts on “Internet Explorer Compatibility Mode Breaks JQuery”
This saved my bacon… Thank you very, very much!
I’m happy it was useful to you, Cheers!
I had a problem with IE9 using Compatibility View on my web page and breaking the Datatables jQuery plug-in. I fixed it by adding the IE=Edge meta tag you describe. Some odd things I noticed along the way to finding a solution:
– It seemed that not all installs of IE9 forced Compatibility View on my page (i.e. some IE9 users never had a problem, while others did).
– My page had the !doctype html tag all along, but the Compatibility View issue still happened and was only fixed by your meta tag.
– Even weirder, Compatibility View did not break by Datatables jQuery plug-in on at least one install of IE9 (i.e. the page worked fine even when I manually turned on Compatibility View).
Thanks for sharing your findings; it’s definitely strange how Compatibility view in some installs of IE9 will work with JQuery while not with others. It’s good that the meta tag forces IE to run in IE9 standards mode since Compatibility view seems to introduce more problems than benefits.
Same problem and same solution :)
Thanks so much for taking the time to share this. Saved me a big headache!
Not a problem, glad the article was useful!
i was having the same problem update panel not working in ie10 ……Using the Compatibility View option in the IE10 Tools menu manually update panel work properly…. i dont want change every time Compatibility View
setting …u have solution for this query please revert back..
i am trying u r bellow code…but its till not working
I filled dropdownlist on the basis of text box change i.e.(inside text change event) in asp.net page using updatepanel to avoid postback its working fine in IE 7,8,9 but its not working on IE 10
Microsoft has changed a number of things in IE 10 and IE 11. I am not sure what your code looks like, but try seeing if setting works.
With IE 10 and IE 11 another problem can be that IIS is not detecting the new browser signatures. I had the same problem a while ago. This problem can be solved by setting Page.ClientTarget = “uplevel”; in the page load event. I give some more detail in this article: https://jwcooney.com/2013/11/19/asp-net-doesnt-detect-ie11/
I hope this helps,
When i change the compatibility view setting its working fine.but i don’t want to compatibility view setting every time.
I have set Page.ClientTarget = “uplevel” at the page_load event
But entire page is again post back to the server
Thanks a lot!!!
You are welcome, I am glad the article was helpful.
Wow! Thanks! I’ve been chasing this tail for months.
Many thanks for this – was scratching my head over this one.
I have been tracing this problem for 3 hours in server setting. You saved my life!
I’m glad the info was helpful! Have a great day.
Justin, Thanks a lot. You saved my day… I was searching for this for a long time…
Hi, I am glad the article was helpful, have a great day!
Thanks man–just what I needed!
Hey, I am glad it helped!
Thank you so much!
worked like magic.
Thanks Justin! This did the trick
Glad it was useful, thanks for your feedback!
How to restrict my web application to run only in Chrome..
Thanks in Advance