If your website is rendering differently in IE when – hosted from a local development system (localhost, local network, etc) and the live server (hosting account), it’s 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 (usually in IE7 mode!).
IE does this because most intranet use is done in the Corporate and Enterprise setting, which is built around an enormous amount of internal legacy code, pages, and webapps. 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:
- Browser’s highest document mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> - Full IE8 Standards Mode:
<meta http-equiv="X-UA-Compatible" content="IE=8"> - IE8 Quirks Mode if no valid DOCTYPE is defined:
<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).
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?
Microsoft
X-UA-Compatibility Meta Tag and HTTP Response Header
Controlling default rendering
Specifying legacy document modes
Defining document compatibility