rob cherny.com

About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Learn More

Loading...

Close Tab

Web Development

The IE 8 X-UA-Compatible Meta Tag

So the IE 8 Beta 1 for developers has been out for a bit now and there's some interesting tidbits to be found by playing with it. Some of the biggest news was the switch to a standards-mode by default. You might start checking out your sites in IE 8 just to see what's going on, but I wouldn't put much time and effort into fixing much of anything as it is a developer beta, and there are liable to be a bunch of fixes coming later.

Compatibility Mode

However, prior to and when IE 8 is officially released, you now have the added benefit of being able to implement your fixes when you have a chance by using the IE 8 X-UA-Compatible meta tag. In fact, on several sites that I work on a semi-regular basis, including this site, NavigationArts.com, and BehindtheBadge.com, and a few others, I've already dropped the tag in based on the site's having some issues in IE 8. Now they're "fixed", at least for the short term, and will not break when IE8 is released.

Basically, the meta tag allows the site to render using the IE 7 engine that you've already tested your sites on. Great. However, the first time I slapped that tag in there, nothing happened. Seriously. The site was still broken.

Location in the HEAD Matters

That is, at least in the beta. That could change. However, given that this is a "http-equiv" type meta tag, this doesn't shock me. The notion of these tags is that they're serving a similar purpose to the same HTTP Headers which are sent prior to the document content, so does the placement of these tags always matter? I don't know. That's another post.

Was Your Site Broken in IE 8?

Well, Cherny.com was. Check it out:

IE8 breaks the cherny.com footer

Bottom line, the first thing I did was stick the meta tag in there, and whoah ... it was still broken. I placed it at the bottom of the HEAD, after everything else and before the closing HEAD.

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <link rel="stylesheet" type="text/css" href="/-/css/cdc.css.php" media="all" />
  3. <link rel="stylesheet" type="text/css" href="/-/css/cdc-print.css.php" media="print" />
  4. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
  5. <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom/" />
  6. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=7" />

I found myself thinking, "whoah, great job, MS, this tag doesn't work at all!" ... truth be told, I just had it in the wrong place. I've done a fair amount of reading on the MSDN dev site about IE 8, and didn't recall that header having to be placed anywhere specific, other than in the document's HEAD.

I immediately shifted it to the top of the list, and yeah, that fixed it. So, as an "http-equiv" type meta tag, this tag needs to be towards the top of the head.

In fact, I played around and the meta tag needs to be above any of the linked files. Especially before the CSS, and before the engine starts to layout the page. Go figure. It actually makes a little bit of sense.

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <link rel="stylesheet" type="text/css" href="/-/css/cdc.css.php" media="all" />
  4. <link rel="stylesheet" type="text/css" href="/-/css/cdc-print.css.php" media="print" />
  5. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
  6. <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom/" />
  7. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />

With the meta tag in the correct location, the fix works perfectly:

cherny.com fixed with the correct meta tag

Put the IE 8 Meta Tag in the Correct Location

So bottom line, the rule of thumb is, that the IE 8 meta tag needs to be placed above any linked files. At least in beta 1 for developers. Enjoy the chance to not fix your site for now, that doesn't happen very often.

Apr 20, 04:04 PM in Web Development (filed under Browsers, Microsoft)

commenting closed for this article

In This Section