Preventing web pages from rendering in IE Compatibility mode

In a perfect world, you would just need to develop against web one standard. As we all know however, the reality is far from perfect. With users now having a significantly greater base of web clients, web developers have their work cut out for them in ensuring that their web pages display correctly.

Recently we were faced with a situation where one of our clients was still using IE8 across the enterprise and there were no immediate plans to change this.

The users identified a ‘bug’ with a particular page where some of the controls were not rendering correctly. After further investigation we narrowed it down to the default browser settings, which were set to display all intranet sites in compatibility mode. The obvious fix was to modify the browser settings. However, with over 400 seats, this was not feasible and we had to look for another solution.

The solution was to explicitly specify the rendering mode on the pages in question. We added the following meta-tag to the head section of the master page. This also has the added benefit of removing the IE8 compatibility button from the browser interface.

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

This element should be placed within the head tag before any other elements, except for the title element and other meta elements.

If you want your page to always render in the latest available engine, add the following tag:

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

References:

http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

http://stackoverflow.com/questions/637039/how-to-avoid-ie8-compatibility-button

For more information about IE compatibility, chat with a consultant today.