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.
The X-UA-Compatible meta tag is a http-equiv meta tag. X-UA-Compatible Meta Tag Recommended Uses: Use the X-UA-Compatible meta tag on web pages where you suspect that Internet Explorer 8 will attempt to render the page in an incorrect view. Such as when you have an XHTML document with an XML declaration.
Just open a website on Edge, go to settings in the right top, and choose "Open with Internet Explorer" You can then pin the new IE window to open it straight next time. Only on this IE window you can choose to emulate other IE versions.
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:
IE=edge
is supported by IE8 through to IE11.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.
Edit 5:
IE11 still needs X-UA-Compatible
set to IE=EDGE
for some corner cases e.g. a customer using IE11 from ActiveX (as WebView within a wrapper application) can drop IE11 back to IE7 mode if you don't set this.
The dual mode mentioned by someone else should work (but doesn't as shown by Microsoft) and is the closest thing I've seen in MS documentation that should work as described. There's an update below that shows the proper form the meta attribute value should take.
So if you use this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
Unfortunately, what you will get is IE8 rendering as IE8 because of the fuzzy version vectoring that the x-ua-compatible engine does. See this document: Defining Document Compatibility: Understanding Content Attribute Values on MSDN. In that section, you'll see that in the first half, they define any version vector defined as larger than the current browser version will be interpreted as the largest available rendering engine. Therefore, emulateIE9 get's translated down to emulateIE8. Stupid.
Then, in the same breath practically, they talk about using multiple version vectors as in the code snippet above to exclude a particular engine. But because of the fuzzy version logic, that would never work. Ah, Microsoft. Fail again.
The reason why using CCs around the meta won't work, is that the browser must have chosen a rendering engine by the time it hits a CC. The x-ua meta must come before anything else in the header except other metas or the title according to MS's own documentation.
If anyone can figure this out, I'm all ears because I'm desperate to exclude IE8 from support while including IE9.
IMPORTANT UPDATE:
Robocat points out, using a comma instead of a semi-colon as Micrsoft shows is the correct way of doing this. I tested it and it worked for me. I've updated my test page.
So the correct form is this (as suggested by robocat):
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
The incorrect form is this (as suggested by Microsoft):
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With