Differences between Pure Internet Explorers and IE Compatibility Modes

gistfile1.md

Or, yet more evidence that you should use feature detection instead of browser/user agent sniffing.

IE9

Not supported in IE9 but works in IE10-as-IE9

• Unprefixed CSS transform. Should require -ms-transform but doesn’t require it.

IE8

Supported in IE8 but not IE9-as-IE8

• ­ works in IE8 but does not work in IE9-as-IE8 Source

Supported in IE8 but not IE10-as-IE8

• The Matrix CSS filter. http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

Not supported in IE8 but works in IE9-as-IE8

• 32KB limitation on Data URIs: Test Case courtesy of @keeganstreet.
• SVG (yet IE9-as-IE8 displays <object data="file.svg">). Source
• Reliable reuse of array.sort arguments http://www.zachleat.com/web/array-sort/
• Navigation timing courtesy of @bluesmoon

IE7

Supported in IE7 but not IE8+-as-IE7

Not supported in IE7 but works in IE8+-as-IE7

• Web Storage courtesy of @mattdsteele

False Positives

• Modernizr reports: IE8 in compatibility view mode has onhashchange, but doesn't support it.
• Box sizing (not supported in IE7 but haz.io reports true in IE9-as-IE7)

Additional uncatalogued data

• https://docs.google.com/spreadsheet/ccc?key=0AntZUVoCEOyYdGQyMG1OWjg1THNFaWdkMHliX2FNc0E#gid=0 Thanks @dmolsen
• TODO: Search through modernizr for document.documentMode references.
• TODO: Compare haz.io results to caniuse results.

NavTiming.

For clarity: by IE9-as-IE8 you're referring to changing the Browser Mode to IE8 inside Developer Tools?

And would you expect any of these to be different if the Document Mode is changed using X-UA-Compatible?

Yes, I’m referring to changing the Browser Mode in the F12 Dev Tools, not using X-UA-Compatible.

I would not expect the results to be any different, but that’s a damn good question. I haven’t tested that variable.

Both the Browser Mode and the X-UA-Compatible header determine the Document Mode. The Document Mode affects what is possible within the browser itself. There should not be any differences between determining Document Mode via a Response Header, Meta Tag, or Browser Mode setting in the F12 Developer Tools.

Regarding this gist, this is an awesome initiative!

@jonathansampson: Actually, in my previous tests in IE8 navigator.userAgent (a property on the client, and an inconsistent value depending on how you set the Browser Mode) is affected by the Browser Mode and not the Document Mode. This was changed in IE9.

I have a blog post about it, but for the moment my website is down. Here’s the link anyway (and a copy of the comment): http://www.zachleat.com/web/et-tu-x-ua-compatible/#comment-2579

Yes, Roatin, you would be right if you were strictly looking at manual modification of the Browser and Document Modes from the developer tools. It’s good that you pointed that out. That mechanism represents the Microsoft documentation correctly. But this analysis is looking at real world scenarios that developers have access to from code (X-UA-Compatible), which appears to operate differently.

Here’s your test case using the meta tag: http://jsbin.com/uxahuf/2#noedit

In IE8: Note the “Setting X-UA-Compatible IE=7 using a Meta Tag (or IE=EmulateIE7)” test cases above. The user agent clearly denotes the Browser Mode (IE8), but the Document Mode is reported as IE7. In both test cases, only the IE7 conditional comment content is shown.

IE9: In IE9 navigator.userAgent now matches to the document mode, not to the browser mode. However, the test cases still represent Browser Mode of IE9, Document Mode of IE7, and Conditional Comments report IE7 as well.

Not supported in IE7, but works in IE ≥8 in CV 7.0: Web Storage

I remembered you were compiling this list and I ran into a couple things on my latest project that I didn't notice in IE10 as IE8 but rendered wrong in actual IE8. Maybe these are too specific for what you are looking for, but here they are anyways.

Twitter Bootstrap Breadcrumbs inside a row-fluid. This is supposedly an inline-block issue. I found the following fix:
.breadcrumb li {
margin-right: 1px;
}

Also select box dropdowns in actual IE8 are fixed width, but in IE10 as IE8 they are dynamic (extend to the length of your content).