How well does IE7/8 mode in IE9 compare to actually running IE7/8

Question

I'm trying to confirm this for work purposes so we don't need to have separate VMs to test in IE7 and IE8. I've always just used the developer tools in IE9 (F12) and changed the browser mode and document mode to do IE7 and IE8 testing.

How does this compare with actually testing in the "real" IE7 and IE8? Has anyone done a comparison or seen a write up detailing this?

I assume the IE7 and IE8 rendering engines are simply included in IE9 and it just uses those engines instead. Is there anything else I should know?

Answer 1

I always use the real browser. I have three examples of IE 9's IE 7 mode behaving differently than the real IE 7:

1. Here is a page that shows a transparent PNG fading out and in. In the real IE 7, you can see darkness around the edges of the image. This is not the case in IE 9's IE 7 mode.

2. Base64 images do not work in the real IE 7, but they do in IE 9's IE 7 mode. Here is a page you can test with to see for yourself.

3. Here is a page that shows a paragraph with zoom: 1px; CSS applied to it. In the real IE 7, the paragraph appears to be very small. This is not the case in IE 9's IE 7 mode.

And I have twelve examples of IE 9's IE 8 mode behaving differently than the real IE 8:

1. Here is a page that shows a 256px × 256px image scaled to 50px × 50px. In the real IE 8, the edges look smooth. This is not the case in IE 9's IE 8 mode.

2. CSS bug 9 from James Hopkins' list of IE 8 bugs (JHIE8B) does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "Bullet (filled disc) list-markers misrendered when using MS Sans Serif font".

3. CSS bug 15 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "Descender space of an inline box containing an IMG (with vertical-align:baseline, and no sibling line boxes containing text) nested in an A element, is drawn only on :hover".

4. CSS bug 22 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "content property doesn’t return the value of an attribute when attribute is dynamically inserted".

5. CSS bug 31 from JHIE8B does not affect IE 9's IE 8 mode (test case). The bug's description is "Marker box doesn’t inherit styling from element to which its attached, when importing those style rules using @import".

6. CSS bug 38 from JHIE8B does not affect IE 9's IE 8 mode (test case). The bug's description is "Rule set that matches an element, which includes a float value, a max-height value, and an overflow value of scroll, triggers complete page blankness (forced Standards Mode), or Compatibility View fallback".

7. CSS bug 56 from JHIE8B does not affect IE 9's IE 8 mode (test case). The bug's description is "Stacking context of relatively-positioned descendant (with lower stacking level than it’s containing block) isn’t re-calculated on ascendant :hover (or :active) when stacking level of containing block is reset to reflect default back-to-front order in document tree".

8. CSS bug 57 from JHIE8B does not affect IE 9's IE 8 mode (test case). The bug's description is "Inline element with visibility:hidden which either immediately precedes parent’s end-tag or immediately follows parent’s start-tag and immediately precedes parent’s end-tag, prevents text-decoration values of underline and overline being applied to the line box".

9. CSS bug 60 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "Text inside an anonymous table object equivalent to a table-cell element isn’t selectable".

10. CSS bug 62 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "An element which is semi-transparent and whose contents are clipped (overflow:hidden applied to parent) when it overflows it’s parents box, experiences a 1 pixel transparency-related bleed along the outside edges that provide boundaries for the overflow".

11. CSS bug 65 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "When a background-image is applied to the :first-child pseudo-element, a different background-image applied to its associated element does not display".

12. JavaScript bug 1 from JHIE8B does not affect IE 9's IE 8 mode (test case, alternate test case). The bug's description is "Utilising querySelectorAll within a statement that breaks out of a for loop, triggers a full program crash.".

It is somewhat inconvenient having to have multiple virtual machines, but at least they're free, and they work with VirtualBox, too.

---

EDIT 1 (2012-08-21 19:40:46Z): Added an example of IE 9's IE 8 mode behaving differently than the real IE 8.

EDIT 2 (2012-11-16 08:11:42Z): Updated the link in the first example of IE 9's IE 7 mode behaving differently than the real IE 7 and added the third example.

EDIT 3 (2012-11-22): Added eleven examples of IE 9's IE 8 mode behaving differently than the real IE 8.