Internet Explorer [in]Compatibility Mode

Picture this: You just finished designing and developing the perfect website. You followed all HTML5 and CSS3 standards, used a few neat styling tricks and added in some of the best images. You send the link over to the client and anxiously await their response ... finally, you see their email address pop-up in your inbox only to find that they have sent you a screenshot that clearly shows NOTHING is displaying properly. Crap.

This happened to us. It was devastating. We asked all the right questions, "What version of Windows are you using?" ... "What web browser are you using?" ... "What version of IE are you using?" ... It really puzzled us because the client was reporting problems that we weren't experiencing ourselves and we were not able to replicate. Finally, one of our developers discovered the answer. After playing around in the developer tools we realized that the website did not display properly when Internet Explorer was switched to "compatibility mode." Turns out, "compatibility mode" breaks most modern websites, but sometimes the IE browser will force a website to display in "compatibility mode" without the user ever knowing. So how do you fix it? It's actually quite simple (and will save you a lot of headaches).

Set the X-UA-Compatible meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

The IE=edge in the meta tag pulls the user out of "compatibility mode" if the browser has it activated. Mission accomplished!