Lazy man’s way to prepare for IE8

Internet Explorer 8, Microsoft’s up-and-coming browser to supersede Internet Explorer 7, has a very different layout engine than it’s predecessor.  IE8’s engine is much more standards-compliant than any version of IE so far.  Standards-compliance is great, but for IE it does yield some unfortunate consequences.  Websites that produce special code for pages downloaded with IE7 often send the same quirky code to IE8, which renders the page according to the “official rules”.  The end result is a webpage that doesn’t look right.

IE8 has a few features for the transition time between now and when IE7 (and older) usage drops to an insignificant level.  First is Compatibility View.  If the user sees a website that isn’t rendering correctly (for example, my website right now), he can click the “broken page” button in the navigation bar.
compatability view button

Here is the page viewed in Standards Mode.  (I scrolled down to show how the content is pushed down past the sidebar.)
website, standards mode

Here is the page viewed in Compatibility View, which is called “quirks mode” behind the scenes.
website, compatability view

I would love to know enough about CSS to fix my WordPress theme to render correctly in standards mode, but honestly I have better things to do, and the website renders correctly in Firefox already, so there doesn’t seem to be much point.  Why?  Because I can simply force IE8 to render the website in Compatibility View with a simple tag interested into the page.  What is the tag?

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

When I add that tag to the proper place in the WordPress theme…
header.php

The webpage renders correctly, and the compatibility view button goes away.
IE8 forced quirks mode

Note: the version of IE8 used in this post is the one that was bundled with the Windows 7 Beta.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>