Say Goodbye to IE Compatibility Mode Troubles

What is Compatibility Mode?

Internet Explorer (IE) is a Web Developer’s best friend (ha ha).  IE is notorious for being the problem child when it comes to HTML, JavaScript and CSS browser support.

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…

http://en.wikipedia.org/wiki/Compatibility_mode

http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/features/compatibility-view

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?

Scenario 1:

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!

Scenario 2:

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

Meta Tags

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" />

HTTP Headers

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

IE-Compatibility-Header

Additional Resources…

http://stackoverflow.com/questions/6156639/x-ua-compatible-is-set-to-ie-edge-but-it-still-doesnt-stop-compatibility-mode?rq=1

Nate Bunton

Nate Bunton is a Lead Software Engineer at Meta Payment Systems. He has over 10 years developing software and leading teams. He works with the Microsoft technology stack focusing in ASP.NET, MVC, HTML, JavaScript, CSS and Web Security. Nate also focuses on Application Lifecycle Management (ALM) engaging his teams with key stakeholders using a variety of agile principals. At Meta Payment Systems, Nate has been a leader in driving technology in the enterprise from new Web Technology to Service Oriented Architecture using WCF and NServiceBus. Nate’s greatest passion is for User Experience, Web Technology and Engaging Teams. He is driven by his desire for continuous learning & improvement.

Posted in Web Development Tagged with: , ,