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!

Comments

  1. Hi David

    I use a non blogger template and needed to target the most up to date feautures of the browser so went for.
    meta content='IE=Edge' http-equiv='X-UA-Compatible'

    It worked for me but then I didn't test on older browsers. Is this foolhardy?

    ReplyDelete
    Replies
    1. If it works, go for it! I fear the unknown so recommending going for stating the browser version instead, but you can certainly give it a shot :)

      Delete
    2. This article on sitepoint offers another approach.
      http://www.sitepoint.com/html5-shim-ie-emulation-mode/

      Delete
    3. That's fine too, except most templates don't already include the html5shiv codebase, so it's redundant. And do you really want to include 3rd party code in that way to your template? For the majority of cases, without recoding your template (which only a teeny tiny percentage of Blogger users will do), setting the meta data in this way will fix the vast majority of people's template issues.

      Delete
  2. Oh my goodness, thank you!!! This post just saved me from a huge hassle. Why does IE make things so difficult?? Can't we all just get along?

    Bless you for posting this!

    ReplyDelete
  3. Thank you so much! My blog looked horrible, and I couldn't figure out a fix. I tried some other meta tags and they didn't work. This one worked.
    Thanks, you're a lifesaver!

    ReplyDelete
  4. thanks a lot friend!

    ReplyDelete
  5. I have no idea who you are, but if you were in front of me right now I would kiss you! Thank you so much!

    ReplyDelete
  6. Thanks for this. I never check my blog with IE anymore since switching to Chrome. A reader pointed out the problem and this was very helpful. FWIW, I couldn't find the line to take out in my template HTML. So I just added the replacement line you suggested and it worked.

    ReplyDelete

Post a Comment