IE11 compatibility view emulator

Identifying IE11 compatibility mode in SharePoint

In this post, I describe how you can figure out if IE11 has jumped in the compatibility mode. This is quite important because in compatibility mode IE does its best to screw up your CSS.

Compatibility view now and before

Microsoft has been pretty keen on introducing new ways to handle browser compatibility and make IE behave in even stranger ways that it usually does by switching it to compatibility mode. There are a few reasons this could happen. In SharePoint’s case, perhaps the most usual one is that IE identifies the SharePoint site to be located in intranet zone… Or it’s actually set to that zone, or the list of sites to display in compatibility mode, via a group policy.

Before IE11 the switch was reasonably easy to notice. There would always be a button/icon similar to this on the address bar when the browser was in compatibility mode:

IE 10 compatibility mode
IE 10 compatibility mode

However, in IE11 Microsoft has removed the icon leaving the end users in the dark about whether the page is in compatibility mode or not. We COULD check the compatibility view and security zone settings to find out the mode, but there’s a better way, too. Now, we must check the developer tools (just hit F12 to bring the console up) to see, which document mode IE is using. IE11 in compatibility view may show us something similar to this: 

IE11 compatibility view emulator
IE11 Developer Tools (F12) showing the compatibility view (emulator)

But wait a minute – what if you can’t access the end user browsers yourself? Before it was pretty easy – you could just ask the end user to check for the compatibility view icon, since it was easily visible on the address bar! Nowadays you’re mostly out of luck – instructing the end users to actually use developer tools is probably going to be difficult. However, there’s a workaround for this.

Identifying compatibility view in IE11 without the use of Developer tools (F12)

It’s possible to parse used IE version and it’s mode from User Agent string, and for that, there’s actually even a small JavaScript-library called IE-truth, which you can find here: https://github.com/Gavin-Paolucci-Kleinow/ie-truth

A quote from the page says:

Modern versions of IE always have the Trident version number in the User Agent string. Older IE detection scripts looked for MSIE in the User Agent string, but this is no longer included in the string as of IE 11 while the browser is in normal mode. The MSIE number is included though, in all modern versions of IE including 11, if it is running in compatibility mode, and informs of the version of IE that the browser is running at. By looking at both the Trident Number and MSIE number if it exists, you can determine what the true version of IE is, if it is running in compatibility mode, and what compatibility mode it is running at.

Using this library, you can implement something like this in the script editor web part in SharePoint:

<span id="browserVersion"></span><script src="//cdn.rawgit.com/Gavin-Paolucci-Kleinow/ie-truth/master/ie-truth.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
// < ![CDATA[
var IE = IeVersion();
var elem = document.getElementById("browserVersion");
elem.innerHTML = "Is your browser using compatibility mode: " + IE.CompatibilityMode;
// ]]>
</script>

This kind of a script should output something similar to the text below if Internet Explorer is in the compatibility mode on the page this script is embedded in:

ie-truth ouput in compatibility mode
The ie-truth output in compatibility mode

With this configuration, you can just ask your end-users to test if their browser is in compatibility mode or not. Navigating to this page and maybe taking a screenshot should be something your average end user is perfectly able to do. 🙂

The following two tabs change content below.

Antti K. Koskela

Solutions Architect / Escalations Engineer at Koskila / Norppandalotti Software / Valo Solutions
Antti Koskela is a proud digital native nomadic millenial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as a Solutions Architect for Valo Intranet, the product that will make you fall in love with your intranet. Working with the global partner network, he's responsible for the success of Valo deployments happening all around the world. He's been a developer from 2004 (starting with PHP and Java), and he's been bending and twisting SharePoint into different shapes since MOSS. Nowadays he's not only working on SharePoint, but also on .NET projects, Azure, Office 365 and a lot of other stuff. This is his personal professional (e.g. professional, but definitely personal) blog.

Let me know your thoughts!