Making IE8 Emulate IE7

As you probably know, Microsoft Internet Explorer 8 was "officially" released yesterday. If you were caught off guard by this and haven't had time to test your sites in IE8, don't lose sleep; you can make IE8 render pages like IE7 using a simple META tag.

The XHTML

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

It doesn't get much easier than that. Don't use this functionality as a crutch for too long though!

Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time.
Step 1: The XHTML
Here we define two links...

Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect.
The XHTML
Just some simple...

Discussion

Thanks for reminding me, all hell is going to break lose at my company because we are bound to a jvm based MLS system. Everytime there’s a new ie, the users download it only to find that it’s not compatible. Of course, ignoring the warning message that’s been on the front page for two months.

James

I’ll wait for IE8 portable (if there will be one) to test it and my web sites.

thanks. I tried it and it did not do well in IE7 with CSS/JS dropdown menus while it works fine in regular IE7.

JOKe

tztz no this doesnt make IE 8 to act as IE 7 in meter of fact IE 8 is the most broken “think” in the world. the Compatability Mode is NOT IE 7
it is some strange mode maybe better than IE 8 but worst than IE 7. For example many jquery UI plugins does’nt work. Some CSSs related to padding/spacing and etc.

So THIS META tag is just “computability mode checked/clicked” for IE8.

Actually, all the sites I did work well in IE8 without touching anything. I directly installed IE8 at my PC, I use the standalone browsers (IE6/7) provided by Xeno Code: http://www.xenocode.com/browsers/ – have a look :)

tomcio

xekhz said: “Use firefox, Stick to the standards”…

Heh… Firefox/Camino has a veerrryy long way to be as standard-based as (for example) Safari* or Opera are standard-based.

Keep noticed: Spectacular “success”/popularity of Firefox is not making this browser a/the “standard”. I do not like (and do not use) Firefox (you may do not like other browser(s))…

I don’t care for websites dentured to work with internet exploiter (and their webmasters and users). I don’t care for ie (producers/fans/users etc.).

If your site works in Safari/Opera/Chrome (one of them used by your choice) than it will work OK also in other browsers (but not** in ie, only). Without needs to make tests in every browser. Have a nice day.

Notice: While this trick will render the Document Mode in “IE7 Standards” it leaves the Browser Mode in “IE8″ instead of making it “IE8 Compat View”. The issue this brings is with e-commerce websites and Google/PayPal Checkout mehtods. For example, if your customer is logged into your e-commerce website and you offer a PayPal/Google Checkout method and they use it; they will be logged out of your website when they return from PayPal. This is an issue depending on how you work with those services (1) it could cause the order to be charged and NOT show in your e-commerce system; or (2) if you have the final review on your website the order will never finish.

The reason for this is due to “Express Setup” with IE8. That setup process checks a checkbox under Compatibility View Settings called “Include updated website lists from Microsoft”. If this is checked it will force websites to render in the Browser Mode “IE8 Compat View”; whereas the META tag solution DOES NOT. As a result, I have found that if your website does not render the “IE8 Compat View” mode and they goto a website that DOES; all authentication sessions and cookies are lost. For more information see my blog post: http://www.nathanhanna.com/2009/11/30/paypal-ie8-issue-demystified/

If you’re in a time crunch and need to get your site published and into production, then by all means use this tag.

But if you have some spare time and really know your HTML code and CSS, then ignore this tag completely. My IE8 issue was not because of CSS but because of extra HTML code that was generated by ASP.NET page.

@muxed I’ve been using this for a long time with no side effects. Its the easiest to use. THEN combined with conditional statements you can have a ie7 only .css file that contains only the changes needed from main stylesheet to fix IE7 issues (which will then work in IE8 which otherwise would be different again and require ANOTHER IE stylseheet!).

That is a very neat trick. Also another option is to use the IE7 view in the IE8’s developer tools, although I’ve heard this is not always 100%. The IE collection tool is also not accurate – I’ve had numerous problems, especially with IE6 not rendering the same when it is part of the IE collection.

The tool we currently use is Multi-Browser Viewer – http://www.MultiBrowserViewer.com – it is a little more pricey but has virtualized standalone versions of IE6, IE7, IE8 and IE9 as well as most of the other web browsers. Plus it also does screenshots.

Sindhu

You are a star David !

Jim

Thanks for sharing this! This saved me a lot of headache. Well, even in 2011 we have to test for IE7… :P

SWD

Can this also be used for IE 9?

Dave

Just throwing this out there
Place this in your header

This will get rid of the IE defaults and make the browser a bit more friendly to code for.

Dave

OK one more time wrap the following with a less than greater than since I cant seem to post it here with them