htmlinternet-explorerx-ua-compatible

Using X-UA-Compatible to emulate IE9 in corporate setup


I have been reading up about document type emulating and compatibility mode in IE and have to say its quite a bit to get one's head around.

I have developed an App with Bootstrap 3 and Ember rendering a few pages controlled through a menu.

I tested this in all browsers, Webkit, Moz, and IE and all seemed perfect. I work in a large corporate, so when I decided to test it on some of my colleagues' computers, on IE, I got a blank page. Now I found that very strange because they were all running IE10 or IE11, although there is the odd IE9. I couldnt understand it because it renders perfectly on my IE.

So anyway, I started hitting F12 on their browsers and realised that many of them had IE7 emulating even though they were running IE10 or 11.

I read a bit about this issue, and I found the following:

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

So I proceeded to add this line to my page so it is as follow:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

Now my question is this: Am I correct in assuming that if there was some sort of group policy set when using IE at work, that this workaround would solve the issue?

I will do some testing tomorrow morning, but just wanted to know if that is along the right lines?

Many people at work use Chrome and Firefox or whatever they want to, but there are obviously quite a few that use IE.


Solution

  • Take note that there must be a reason why the current group policy is set to enable compatibility mode (some other intranet app maybe) and that other app might stop working (or render badly) if you disabled it. If the admin have configured it in a way where that there's a Compatibility View list then you're in luck because all you need to do is not include your web app's URL into that list.

    https://msdn.microsoft.com/en-us/library/ie/gg622935(v=vs.85).aspx

    As for the document mode, I suggest for you to use this instead:

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

    Setting the version to 'IE=edge' tells Internet Explorer to use the latest engine to render the page and execute JavaScript.

    https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible

    The only reason you want to "IE=EmulateIE9" is that your app is targeting the legacy document mode which in your case it isn't since you're using the latest web frameworks out there. I assume you want the best UI experience for your users.

    I understand that in your case the IE versions vary and that some might not support "IE=edge". It will be just OK because it will fallback to the highest supported document mode. For example, IE8 with IE=9, IE=Edge, or IE=EmulateIE9 results in IE8 mode.

    https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx