Geeks With Blogs
Freestyle Coding Programming in the Real World

It appears I stumbled upon a hidden IE8 "feature." Unfortunately, this was an intentional feature.

Let me set the stage. I am currently working on the advanced version of the table I posted about last month. As I was coding the new features, I ran into a question that I wish to pose to the visual designer. I walk over to her desk, bring up the page, and ask the question.

As I'm prompting the person, I stumbled upon a strange issue. The CSS is not rendering on the generated html. This was quite befuddling to me, as the site worked perfectly on my machine with the same browser.

After 15 minutes of creative troubleshooting1, I stumbled upon this difference. I accessed the site from localhost. Out designer was using my machine name. This led me to the idea of opening two tab. The first accessed the site from localhost, the second by machine name. As you can probably guess by now, I now could reproduce the issue.

This led to a google search for "ie8 localhost css problem." The first result led me to a post titled CSS ignored by IE when not on localhost2. Someone asked my same question. They were answered by someone linking to this article with the following quote:

By default, IE8 displays "Intranet" sites in IE7 mode Eases transition for Enterprises who have LOB applications in "Intranet" This feature is on by default User can turn off IT Pro Can use Group Policy to display intranet sites in IE8 mode instead.

So, Microsoft assumed that everyone coded their intranet sites in wacky ways. So wacky, that they didn't invite these sites to the new party. This is especially perplexing. Not only does IE8 not notify you that you are in compatibility mode, it also does not give you the option to turn off compatibility mode.

Fortunately, there is an easy fix for this issue. You can meta the site to force it to use the highest available rendering mode. This is though the VERY underused X-UA-Compatible meta tag.

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
By using this tag, you can tell whatever version of IE that you are currently using to use the highest available rendering engine. A Google search for "X-UA-Compatible meta tag" will give you a full reference to this meta tag.

1Let's face it, any browser based bug relies on some creating troubleshooting.
2Come on, we can't all be the first on to find a problem. However, more links mean easier to find.

Posted on Tuesday, May 10, 2011 8:22 PM CSS , HTML , IE | Back to top

Comments on this post: New IE8 "Feature"

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Chris Gardner | Powered by: