IE Displaying Pages Differently Between Website on Local Host and Website on Live Server

Posted: 2014-07-12 23:15:12

The default behavior for Internet Explorer 11 is to display intranet (vs. internet) websites differently by using compatibility mode.

If your website is rendering differently in IE when hosted from a local development system (localhost, local network, etc) and the live server (hosting server), it is because IE is:

A) Detecting that this website is coming from the Local Intranet Zone (vs. the Internet Zone).

B) And, in-turn, rendering the website in Compatibility View (which is usually in IE7 mode!).

IE does this because most intranet use is done in the Corporate and Enterprise environment, which is built around an enormous amount of internal legacy code, pages, and web-apps. And backward compatibility is the #1 selling point for Microsoft in this market.

Setting IE’s Compatibility Mode

To clear out the above IE behavior:

IE Settings > Tools > Compatibility View Settings

Uncheck “Display intranet sites in Compatibility View”, and also uncheck (if set) “Display all websites in Compatibility View”.

Then in IE Dev Tools (press key: F12), make sure that “Browser Mode:” and “Document Mode:” are set to the latest version.

Setting Page’s Document Mode

In the page’s template and/or source code, add “X-UA-Compatible” META Tag to force:

*This Meta Tag must be placed in the <header> section before any other tags.

Or you can set this server-side by sending a “X-UA-Compatible” Response Header:

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=edge" env=ie
    Header append Vary User-Agent

The above code can be placed in the website’s VirtualHost file or an .htaccess file.

*The Meta Tag takes precedence and will override the Response Header (if both are present).

Further Reading

A guide to IE Compatibility View and X-UA-Compatible
What’s the difference if meta tag X-UA-Compatible exists or not?


X-UA-Compatibility Meta Tag and HTTP Response Header
Controlling default rendering
Specifying legacy document modes
Defining document compatibility