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

by

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.

More Related Contents:

  1. What does do?
  2. “X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE”
  3. Internet Explorer and clip-path
  4. Force IE9 to emulate IE8. Possible?
  5. IE Compatibility Mode: ‘X-UA-Compatible’ tag ‘Edge’
  6. Fill SVG path element with a background-image
  7. How to modify the fill color of an SVG image when being served as background image?
  8. SVG drop shadow using css3
  9. border curved css – circle with curved end
  10. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  11. make an html svg object also a clickable link
  12. Using base tag on a page that contains SVG marker elements fails to render marker
  13. How do I scale a stubborn SVG embedded with the tag?
  14. How to hide drop down arrow in IE8 & IE9?
  15. HTML TAG and local folder path with Internet Explorer
  16. HTML5 Video not working in IE 11
  17. How to calculate required hue-rotate to generate specific colour?
  18. Method to convert HTML5 canvas to SVG?
  19. Closing SVG tags, explicit or self closing?
  20. What is haslayout?
  21. SVG image inside circle
  22. File opens instead of downloading in internet explorer in a href link
  23. CSS transform origin issue on svg sub-element
  24. How do I create a teardrop in HTML?
  25. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  26. Create a Reverse Clip-Path – CSS or SVG
  27. @font-face not working with specific version of Internet Explorer 11
  28. Will targeting IE8 with conditional comments work?
  29. svg background image position is always centered in internet explorer, despite background-position: left center;
  30. How can I display an image inside SVG circle in html5?

Leave a Comment