I've been using CSS3 Pie on my site with great success. I recently had a Jotform form with a custom CSS button with radius, Pie doesn't work with Jotform so I came across this meta tag
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
which when added to the particular page resolved the radius issue in IE8.
My question is this, if it's this simple to allow older versions of IE to render modern CSS can this tag be utilized as default and if not why not i.e bad practice, technical reasons etc.
It seems to good to be true so I'm guessing there has to be a reason, I'm aware it doesn't validate but to avoid this it can be added to an .htaaccess file.
This meta tag is needed to prevent IE8—10 from switching to Compatibility mode (which means more or less emulation of the IE7 renderer). In most cases, it's a good practice to use the latest available rendering engine, so it's better to keep this meta tag.
Also, be sure that pages have the proper Doctype (<!DOCTYPE html> will be enough for almost all practical applications), so other browsers also could display them using the newest rendering mode, according to the latest standards that browsers can support.
!-- Force IE to use the latest version of its rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The above meta tag is used to force IE to use the latest version of its rendering engine.
In case if user opens in IE8 browser with IE8's default rendering engine? This will certainly fails. Therefore it is good to use CSS3PIE along with this meta tag.
You can check this in MSDN Library.
Related
I read Chrome Frame closed last month, I thus tried to understand what it'd mean for the X-UA tag and after 3 hours of research I still didn't find the answer I'm looking for, my question is the following :
Is it still valid nowdays to use IE=edge,chrome=1 or should I stop at IE-edge from now on ? Or what would be the best pratice to do regarding X-UA, should it be avoided ?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> serves two purposes.
IE=edge: specifies that IE should run in the highest mode available to that version of IE as opposed to a compatability mode; IE8 can support up to IE8 modes, IE9 can support up to IE9 modes, and so on.
chrome=1: specifies that Google Chrome frame should start if the user has it installed
The IE=edge flag is still relevant for IE versions 10 and below. IE11 sets this mode as the default.
As for the chrome flag, you can leave it if your users still use Chrome Frame. Despite support and updates for Chrome Frame ending, one can still install and use the final release. If you remove the flag, Chrome Frame will not be activated when installed. For other users, chrome=1 will do nothing more than consume a few bytes of bandwidth.
I recommend you analyze your audience and see if their browsers prohibit any needed features and then decide. Perhaps it might be better to encourage them to use a more modern, evergreen browser.
Note, the W3C validator will flag chrome=1 as an error:
Error: A meta element with an http-equiv attribute whose value is
X-UA-Compatible must have a content attribute with the value IE=edge.
It's still valid to use IE=edge,chrome=1.
But, since the chrome frame project has been wound down the chrome=1 part is redundant for browsers that don't already have the chrome frame plug in installed.
I use the following for correctness nowadays
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
worked for me, to force IE to "snap out of compatibility mode" (so to speak), BUT that meta statement must appear IMMEDIATELY after the <head>, or it won't work!
please see What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do? November 2021 Update by L84
As ... 10+ years old, my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers.
When I view my website in IE10, it seems that it's automatically forcing IE8 document standards. However, I would like it to use IE9 standards, when being viewed in IE10.
Is there a way to do this?
The page has <!DOCTYPE html> at the top.
EDIT: It turned out that I had <meta http-equiv="X-UA-Compatible" content="IE=8" /> in the page header, which was causing the page to render in IE8 document mode. Changing this to IE=9 fixed the issue.
I recommend to use the X-UA meta tag. The X-UA-Compatible meta tag allows you to choose what version of Internet Explorer the page should be rendered as.
You specify the user agent and version to use in the contents of the tag. The current options you have for the content are: IE=5, IE=EmulateIE7, IE=7, IE=EmulateIE8, IE=8, IE=EmulateIE9, IE=9, IE=edge.
Emulating the version tells the browser to use the DOCTYPE to determine how to render content. Pages without a DOCTYPE will be rendered in quirks mode. If you tell it to use the browser version without emulating (i.e. IE=7) the browser will render the page in standards mode whether or not there is a DOCTYPE declaration. IE=edge tells Internet Explorer to use the highest mode available to that version of IE. Internet Explorer 8 can support up to IE8 modes, IE9 can support IE9 modes and so on.
I think you need this:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Use X-UA meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
And I don't know why you want to do this, as IE 10 is far more excellent than any of the previous versions of IE, if you are testing, you can press F12 and change the mode
I have two questions:
How can I force IE10 to render in IE9 document mode? Currently it's rendering my page in Standard document mode.
In IE10's developer toolbar, I am not able to see the option of document mode of IE10. Is it not implemented, or is my browser version is out of date?
Thanks for all your help.
Edit: thanks everyone for the solutions provided. Earlier I was using a meta tag
<meta http-equiv="x-ua-compatible" content="IE=edge" >
just to make sure that IE will render the page in highest document mode, but I was facing some issues with IE10 standard mode, so I changed the meta tag to render the page in IE9 mode:
<meta http-equiv="x-ua-compatible" content="IE=9" >.
You should be able to do it using the X-UA meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
However, if you find yourself having to do this, you're probably doing something wrong and should take a look at what you're doing and see if you can do it a different/better way.
Do you mean you want to tell your copy of IE 10 to render the pages it views in IE 9 mode?
Or do you mean you want your website to force IE 10 to render it in IE 9 mode?
For the former:
To force a webpage you are viewing in Internet Explorer 10 into a particular document compatibility mode, first open F12 Tools by pressing the F12 key. Then, on the Browser Mode menu, click Internet Explorer 10, and on the Document Mode menu, click Standards.
http://msdn.microsoft.com/en-gb/library/ie/hh920756(v=vs.85).aspx
For the latter, the other answers are correct, but I wouldn't advise doing that. IE 10 is more standards-compliant (i.e. more similar to other browsers) than IE 9.
You can tweak the Registry if you want to make changes only to your own system. If you have IE10 and lots of web sites you visit don't render properly in IE10, then you can tweak your registry to force IE to open in IE9 mode.
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Create a DWORD as iexplore.exe and give value 9999. Restart your IE and it will open in IE9 mode :)
Thanks to my colleague Sreejith D :)
I haven't seen this done before, but this is how it was done for emulating IE 8/7 when using IE 9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
If not, then try this one:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Add those to your header with the other meta tags. This should force IE10 to render as IE9.
Another option you could do (assuming you are using PHP) is add this to your .htaccess file:
Header set X-UA-Compatible "IE=9"
This will perform the action universally, rather than having to worry about adding the meta tag to all of your headers.
By what this says, IE10 (the article is referred to a preview release, anyway) it's able to use X-UA-Compatible only if the document is in quirks mode (no DOCTYPE), otherwise IE10 won't react to the request.
Here's an excerpt:
Thus, to make IE10 react to the X-UA-Compatible directive, one must either create a page that triggers quirks-mode per the rules of HTML5 (that is: an a page with no doctype). One can also send the directive as a HTTP header, however: A HTTP sent directive appears to have no effect if you use it to downgrade the rendering — it can only be used to upgrade the rendering
So, you've to do it manually with Dvelopers Tools, or with quirks mode (but I suggest to stay in IE10 mode which is for the first time aligned to the other browers' standard)
EDIT: The follows are some useful link to read:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx
You can force IE10 to render in IE9 mode by adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
in your <head> tag.
See MSDN for more information...
there are many ways can do this:
add X-UA-Compatible
tag to head
http response header
using IE tools F12
change windows Registry
The hack is recursive. It is like IE itself uses the component that is used by many other processes which want "web component". Hence in registry we add IEXPLORE.exe. In effect it is a recursive hack.
I found this post while I was looking for a solution to my DNN6 website.
The error was
SCRIPT5007: Unable to get property 'documentElement' of undefined or
null reference
But I needed the same solution: force compability mode to IE9. So let me share with you what I did to solve this.
So, for DotNetNuke 6 users try the StyleHelper SkinObject
Worked great for me!
HTML5Boiler plate suggests we put this one in our HTML page if we favour Chrome over IE
(which is my case)
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
We all understand how it works.
If the user is using IE but it has also installed the Chrome Frame the chrome frame will be used to run the page (which is probably much faster when it comes to execute my js)
The question: is there any 'bad' side effect ?
any particular reason why I should not add that snippet ?
Thanks
The only downside I know about this snippet is that validators don't accpet yet the content value of this meta (even if they should), so if it seems annoying to you, just remember you can also specify it inside an .htaccess (as suggested also on html5 boilerplate site)
See https://gist.github.com/1292092 for an example of htaccess inclusion
See also this thread about meta validation
This does not have any downsides.
This will force the browser to render as properly as it can, ignoring those awful IE Compatibility modes.
This will not break the browser, just peacfully explain to it, that this page doesn't wish to be experimented with, and just to be shown properly.
There are in fact downsides to this meta tag (along with conditional comments) which is why we recommend you reference it from the server. See this issue for details.
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.
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.
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">
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.
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
This one works for IE9 to me.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
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.
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" />
<!--[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