Loading...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:
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.
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.
With the meta tag in the correct location, the fix works perfectly:
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, 05:04 PM in Web Development (filed under Browsers, Microsoft)
Possibly Related Articles
Commenting is closed for this article.