Emulate IE7 for IE8 but not for IE9 using “X-UA-Co

Question

I have a website depending on vector drawing, for Internet Explorer I'm using VML and for other browsers I'm using SVG. IE8 however, doesn't have support for neither without falling back to IE7-mode which has VML.

Therefore I'm including <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />.

The problem (well, actually a good thing) is that IE9 now has support for SVG so I don't want it to fall back to IE7-mode which has much worse performance and compatibility. How do I tell only IE8 to fall back to IE7-mode but let IE9 stay in IE9-mode?

Right now I'm doing a server side check on the agent whether to include the EmulateIE7-string in the head or not but I want to avoid this as far as it's possible.

Answer 1

I just had a play and found the following works for me:

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

That is with a comma not a semi colon!

I haven't looked at the spec, but the format is similar to content="IE=7,chrome=1" that works for Chrome Frame. I also found that content="IE=7,9" works but I suspect that is not a correct format.

Edit:

Beware of a serious problem if your page is in a iframe. If you use the above in a framed page where the parent is in any mode less than IE9 strict, then IE9 will fall back to IE8 mode (ignoring the IE=7 request!). Any known workarounds welcome :) Might not be relevant to IE11.

The above seems to be a side effect of the by design feature, that iframes (and I presume frames) are either all in IE9 mode, or all are less than IE9 mode. One can never mix IE9 frames with < IE9 frames, see MS issues #599022 and #635648.

Edit 2:

Beware that IE11 only supports "IE=edge" (not IE=11), and that using IE=edge has significant effects upon IE functionality (including the user agent).

Edit 3:

• Fantastic flow chart explaining how IE works out what mode to use for IE9
• IE=edge is supported by IE8 through to IE11.
• The Meta tag takes precedence over the HTTP header (which can be used instead of the meta tag)
• Some more X-UA-Compatible info for IE10.

Edit 4:

X-UA-Compatible was removed from the Microsoft Edge browser. Only Internet Explorer has the compatibility modes. Beware that if you are using the WebView within an App on Windows Phone 10, then you are still using IE11 (not Edge).

Also for a variety of reasons you cannot trust the user agent to tell you the correct compatibility level, instead use document.documentMode from JavaScript.

Answer 2

<!--[if IE 8]>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->

It's called conditional comments
http://en.wikipedia.org/wiki/Conditional_comment