What is Compatibility Mode?
Internet Explorer 8 was promoted by Microsoft as having stricter adherence to W3C described web standards than Internet Explorer 7. As a result, as in every IE version before it, some percentage of web pages coded to the behavior of the older versions would break. In Compatibility View, websites will be displayed as if you were viewing them in a previous version of Internet Explorer, which will often correct display problems. Gee, thanks IE.
Read All About It…
Internet vs. Intranet Settings
Browser Support for IE is a difficult to manage, but it’s getting better. Compatibility Mode for IE8, 9 10 do add an additional variable you may need to consider. So what’s the difference between Internet & Intranet Settings?
Picture this….You are developing in a local, DEV or UAT environment (somewhere on an internal network). You have checked all the browsers, IE 7,8,9,10, FireFox (FF), Chrome, Safari. You’ve spent extra time making sure everything looks just right and you’re ready to launch in production.
You deploy to production….drum roll please….Oh No! Your styles are broken on your website. What happened? Let’s take a look at the Compatibility View Settings…
You have been developing & testing in Compatibility View this entire time. Thanks for the default IE!
Ok, you understand the Intranet vs. Internet settings. We can uncheck the box, educate our developer and testers. We should be good to go….What about the rest of the organization? Stakeholders? Executives? They don’t know the difference and they shouldn’t need to.
Say Goodbye to IE Compatibility Mode Troubles for good…
You can control the compatibility view settings with <meta> tag and HTTP Headers
You can use <meta> tags in your html to specify what version of browser you wish to target. The IE=edge specifies to use the latest version of IE on the machine. This is good, but it doesn’t trump the Compatibility View Settings for intranet sites
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
Or you can specify a version to Emulate
<meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible" />
The HTTP Headers trump everything; this is where you can say goodbye to IE Compatibility Mode Troubles for good! Simply put this in your web.config or configure in IIS.
Within the <system.webServer> tag, add this….
<httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="IE=edge" /> </customHeaders> </httpProtocol>
Now the X-UA-Compatible header is coming back in the Response Headers