Why not use Internet Explorer 9’s Developer Tools for testing IE8 & IE7? Here’s why.

Twice last week this issue has come up so I’m providing some examples and reasoning as to why you should not even bother using Internet Explorer 9 for testing websites for how they would look in Internet Explorer 8 and Internet Explorer 7.

Background
IE has traditionally not been developer friendly out of the box. In IE9, that changed and Microsoft provided Compatibility Modes within Developer Tools (F12).

Months back, working with a couple devs, I was told this is how they test with IE8. I thought “wow, great that Microsoft is trying to help developers.” I never looked into this feature before, as I had always just used VMs for testing, long before IE9. So when IE9 came out, I continued that patter. (Microsoft provides free virtual machine images for testing.) However, my distrust for them overpowered me and I decided to run some tests.

The first test I ran was Acid3 http://acid3.acidtests.org/ Viewing the screenshots below, you will see the immediate differences I saw: A different score and slightly different rendering (eg “FAIL” in the corner.)

Acid3 test in IE8 (native)

Acid3 test in IE9 set to IE8 mode

Keep in mind one huge difference is the new JavaSript engine in IE9. Changing to IE8 or IE7 does not change the JS engine. This should be a huge red flag to those who were working on this feature, but based on results, they thought it was worth shipping anyway even though they acknowledge it’s a big issue http://blogs.msdn.com/b/ie/archive/2011/03/24/ie9-s-document-modes-and-javascript.aspx

“We have made every effort to ensure that IE9’s compatibility document modes support the same functionality that we shipped for these modes in IE8. However, because the Chakra engine is not the same as we shipped in IE8, it is bound to have some differences.”

This is an important issue, and I disagree that they “made every effort”  as they could have built it to switch engines, but I digress…

Now I have run into a few more people thinking this works, as well as a few more scenarios where it doesn’t – unrelated to JavaScript. There’s also CSS issues which I haven’t seen Microsoft acknowledge.

Here’s a few examples to show you how IE8 stacks up to IE9 in IE8 mode.

Finally, I did some of these same tests in IE7 and encountered similar results.