Login/Register
Emulate IE7 for IE8 but not for IE9 using "X-UA-Compatible"
Asked Answered
htmlinternet-explorersvgvmlx-ua-compatible
C

8

42

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.

Cachinnate answered 5/8, 2010 at 10:1 Comment(5)
IE 8 does support VML, it just changes the way you declare it/handle it. e.g., you need to use -ms-behavior instead of behavior. More at ajaxian.com/archives/the-vml-changes-in-ie-8. – Citrus
IE8 Standards Mode does support VML. There are all sorts of problems with it (changes, new bugs, and poor peformance), but in principle it should be possible to make it work. Microsoft seem to be letting the VML implementation degrade with each browser version; presumably they consider it a dying technology. – Metabolism
Oh, doing additional work to get 10x performance decrease and extra bugs isn't exactly tempting. – Cachinnate
So did you end up sticking with the server-side check with EmulateIE7? – Uglify
Hello Urjan - please take a second to choose an answer. – Refresh
D
41

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.

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.

Debbradebby answered 2/12, 2010 at 2:26 Comment(4)
Yes, it works perfectly. Using comma is vital here. Also, I am not sure about using IE=7 instead of IE=EmulateIE7. – Raynata
Confirmed that this works on 9.0.8112.16421 (final release). The above take makes IE8 render in IE7 standards mode and IE9 renders in IE9 standards mode. Works with <!DOCTYPE HTML>. For IE7 quirks mode and IE9 standards mode, use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9">. – Coney
Also relevant: #6157139 - but beware that IE=edge has significant side effects upon IE11 – Debbradebby
Regarding the iframe non-inheritance of x-ua-compatibility, this was my finding: If a document has no X-UA-Compatible value but it is served in an iframe to a parent document that uses the meta tag for X-UA-Compatible: no version of IE will pass the X-UA-Compatible value to the child document. It does not inherit. However, if all documents are being served by the same web server, you can set the X-UA-Compatibile setting at the http response level and forego using the meta tag – that way the iframe will also get the value. – Dictum
D
27

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">
Dictum answered 20/10, 2010 at 20:57 Comment(3)
thanks for this informative answer. I wish it had the solution, but at least the problem is clearer now. – Coney
SUCCESS! Thanks to robocat. YES! Using a comma instead of a semicolon seems to work. I've updated my index page to reflect that. #3414129 – Dictum
Confirmed that this works on 9.0.8112.16421 (final release). For quirks mode IE7, use: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9"> – Coney
E
3

I have so far used all these, nothing works on IE9:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >

<httpProtocol>
        <customHeaders>
          <clear />
          <add name="X-UA-Compatible" value="IE=EmulateIE8" />
        </customHeaders>
    </httpProtocol>

this is so frustrating, none of these meta tags seems to be working. Microsoft, What is so difficult in supporting stuff you say should work in your documentation? we have to spend hours doing browser wars. You are wasting everyone's time.

Eastwards answered 25/5, 2011 at 16:26 Comment(1)
Apparently on IE we cannot put conditional comments before the X-UA-Compatible. – Eastwards
U
3

If you want IE 8 to use IE7 standards and IE 9 to use IE9 standards this one worked for me:

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

For IE9 this gives me IE 9 compatibility mode with IE 9 standards. For IE8 this gives me Browser Mode IE8 Document Mode IE7 Standards

Ugly answered 18/10, 2011 at 11:7 Comment(0)
H
0

This one works for IE9 to me.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
Henn answered 29/7, 2015 at 21:53 Comment(0)
K
-1

I think what you need is:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

according to http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx as it states this as "... an example that combines values so that IE8 renders a webpage in IE7 Standards mode while IE9 renders the webpage in IE9’s Standards mode:"

However I for one can't get this to work.

Keese answered 5/10, 2010 at 13:17 Comment(0)
P
-1

Wow Microsoft have really created a nightmare here. We're going to be talking about this well into the future!

Anyway this works for me.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
Poona answered 29/10, 2010 at 4:27 Comment(1)
I changed IE=EmulateIE7; IE=IE9 to IE=EmulateIE7; IE=EmulateIE9 – Poona
E
-3
<!--[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

Erickericka answered 5/8, 2010 at 10:8 Comment(5)
Does not work. IE8 stays in IE8-mode. I seems like the rendering mode is picked before the conditional comments kick in. – Cachinnate
Indeed, any use of a conditional comment fixes the documentMode so it cannot be changed by a later <meta>. – Metabolism
Any conditional comment in <head> causes emulate modes to not work. – Coney
@Metabolism is right. Logic here is obvious -- the browser should already know what it behaves like before the conditional comments can be processed. – Raynata
Thanks at Sruly, @bobince, Rich, and unclenorton. Even though not correct, the answer and comments were very helpful in solving a very frustrating issue. – Lissettelissi

© 2022 - 2024 — McMap. All rights reserved.