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.
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.
In the page’s template and/or source code, add “X-UA-Compatible” META Tag to force:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
*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 </IfModule> </IfModule>
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).
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