[UPDATE 08/18/2017] This post is slightly out of date and wanted to mention the link to the W3C Compliant website does not fully address accessibility. I would recommend using the following instead to ensure full accessibility for your website: http://wiht.link/html-guide
[END UPDATE]
When I was recently working on my personal website, johnzeren.com (still a work in progress), I noticed something peculiar. I noticed that when I was rendering the HTML, driven by CSS, in my development environment everything was lining up in Firefox and Internet Explorer 9 as expected. I know IE has made major strides in being W3C Compliant. As a good web developer should, I was going to check compatibility in other browsers, but was anxious to put the files I did have on my shiny new johnzeren.com domain first. After uploading the files, I gave the site a quick check in FireFox and all was well. Next, I quickly checked in IE9…. Something was wrong!
The Background
When viewing the same source code in two different environments, CSS was rendering differently. The drop down menu was not where it was supposed to be and the background wasn’t repeating as it should.
The Problem
After many iterations of uploading the source code and attempting to clear my browser’s cache, I was officially stumped. After all, what could anything on the server side have to do with the way that a browser renders HTML?
The Resolution
To my surprise (and I have been doing web development for a long time) I found this post on Stack Overflow where someone was having the same problem.
The answer:
If there’s no X-UA-Compatible value and site is in Local Intranet security zone, it will be rendered in EmulateIE7 mode by default.
Before now, I had barely had any use for META Tags in HTML other for storing key words to improve search engine optimization. It turns out, some servers, including those of my hosting company, do set a default document type for HTML which can affect the way items are rendered in the browser. In my case it was set to emulate IE7
IE=EmulateIE7
In order to fix this issue, I chose to have IE render on the “edge” of the latest browser available (in this case IE 9). I placed the following code snippet in the <HEAD> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
If you encounter this issue you may not want to hing on the edge of the latest version of IE. Below is a list of possible X-UA-Compatible values:
| Rendering mode | X-UA-Compatible value |
|---|---|
| Edge Standard compliancy | IE=edge |
| IE8 Standards compliancy | IE=8 |
| IE8 Emulation | IE=EmulateIE8 |
| IE7 Standards compliancy | IE=7 |
| IE7 Emulation | IE=EmulateIE7 |
| IE5 Quirks | IE=5 |