IE Browser (IE8, IE9, IE10) Can Not Display Blogger (blogspot) Webpage Properly, X-UA-Compatible Problem?

As a blogger/ webmaster, you have to make sure your blog/ website compatible with all the popular browsers, esp. Chrome, Firefox and IE, or in another word, make sure different browses can display your webpage properly. But the problem is, looks like IE has the most problem with Blogger (blogspot) site, with either extra large spaces, or even can't display your Adsense (with an error "Internet Explorer cannot display the webpage"). How to fix?

This is something you can fix (most of the time) by replace one line of the HTML codes in the Blogger blog template.

From the blog dashboard go to your template editor (Dashboard->template->Edit HTML), take a look at near the top of the page, you probably will see one line like this:

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

The above one-line code need to be replaced. What it means is telling IE browser please display my page by reversing back to IE7, which is fairly old.

If you take a look at your site visitors' browser stats from Google Analytics, you will see probably less than 10% visitors are still using the old IE6 and IE7 among all IE users, more than 90% of people are using IE8 and above. So make your site compatible with  the rest of the world !

Then what to do? My experience, replace the codes with following one line works best for me:

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

This tells the IE browser that my Blogger blog site is compatible with IE8 and above.

Save the blog template, refresh your page, see what happens?!

Now your site should be displaying perfectly !

More Details

The above solution is not originated from me, it's from the guys at blogxpertise.com, they suggest to replace with "<meta http-equiv='X-UA-Compatible' content='IE=8, IE=9, IE=10' /> ", which give me a little problem- I'm using IE9 and the Adsense can't be displayed !

Details about the options for content= can be found from Stackoverflow at following page:

http://stackoverflow.com/questions/14611264/x-ua-compatible-content-ie-9-ie-8-ie-7-ie-edge

Here's more details from Stakoverflow:

For versions of Internet Explorer 8 and above, this:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />

Forces the browser to render as that particular version's standards. It is not supported for IE7 and below.

If you separate with semi-colon, it sets compatibility levels for different versions. For example:

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" />

Renders IE7 and IE8 as IE7, but IE9 as IE9. It allows for different levels of backwards compatibility. In real life, though, you should only chose one of the options:

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

This allows for much easier testing and maintenance. Although generally the more useful version of this is using Emulate:

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

For this:

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

It forces the browser the render at whatever the most recent version's standards are. Just like using the latest version of jQuery on Google's CDN, this is the most recent, but also can potentially break your code since its not a fixed version.

Last, but not least, consider adding this little tidbit:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Adding "chrome=1" will allow the site to render in ChromeFrame for those (intelligent) users who have it, without affecting anyone else.

Enjoy and good luck !