Question: Why is my Blogger blog not displaying correctly in IE 9?

As web developers we learn to live with what we call "cross-browser compatibility" issues. We know that, browser to browser, version to version, your website might display differently, or flat-out wrong. When we develop a new site we develop to the standard, then check on different browsers and versions to make adjustments if needed. Every time a new browser comes out you learn to deal with its occasional idiosyncrasies. One of the worst culprits is IE 9 and compatibility mode.

One of the most annoying "features" of Internet Explorer is their compatibility mode. At Microsoft they believe that web developers wanted to code to "the standard" of one of their browsers, say Internet Explorer 6, and that IE 9 might not display the site properly so you'd actually want the browser to essentially revert back to displaying as IE 6.

So how does this affect your Blogger site?

Many of the templates in Blogger, or built for Blogger, were developed a few years ago but when browsers such as IE 7 were the most modern. In your template, near the top, is probably a line like so:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

What this is saying is that your IE 9 should revert back to displaying your website as if it was IE 7. While IE 7 was a major improvement to IE 6, it was considered one of the last standard-compliant compared to all of the other major browsers of the time. Hence the problem with your website. Your template is telling your shiny IE 9 browser to render your site as an awful browser (no joke!)

So how do you fix it?

Fixing the issue is fairly easy. Microsoft provides you with a list of emulation meta tags, but the one you likely want to replace with is the following:

<meta http-equiv='X-UA-Compatible' content='IE=8, IE=9, IE=10' />

Replace the line, save your template, and you should be all set!