Is there a way to trigger standards mode in IE7 when using the HTML5 doctype?
My document starts like this:
<!DOCTYPE html>
<html>
<head>
...
F12 opens Developer Tools in IE 9. Alt+7, Alt+8, & Alt 9 will allow you to toggle between browser versions. There are also menus that allow you to change both document and standards modes.
A couple things:
If you are trying to view the DOM tree using the developer tools and switching between different versions in compatibility mode, you should know that you need to refresh each time you switch modes. Otherwise you won't be able to see the tree.
Also, these emulations are not exactly like the original browsers. It really is impossible to see "the way another browser would render" a page unless you are on that other browser.
I recommend using browsershots.org. It's free, and requires no download. If you want to get really sophisticated, there are other options. However I recommend browsershots. Just beware that it takes a few minutes to get a couple images back, and there is a maximum limit per day. You can raise that a bit by registering your account.
Use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> in the head section.
Related
I have looked through stackoverflow quite a bit and found that the following is the most recommended way to force non-compatibility mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
My issue with these answers is that they are all IE 8 & 9 era answers.
Is this still the way to force to the latest browser that the user is running?
This is for a public site and our users often use IE10, IE9, IE7 & IE8 (roughly in that order).
And yes, IE7 use is more common than IE8.
My only constraint for IE8 is that the site be readable.
It is a modern site, and I want whatever browser the user has to not be in compatibility mode. I know there is a way to specify a browser version, but I'd prefer not to do that with Win10 coming at the end of next month.
If anyone has any info on what Windows 10 will do with this line that would be very useful to know (the new browser is called "Edge").
Thanks for any help that can be provided.
-Chris C.
P.S.
I do have the following as the first line (no spaces) of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
I work on the Internet Explorer and Microsoft Edge team.
What you provided is the x-ua-compat header/meta-tag. It is designed as a hold-over solution to help you move forward and adopt support for modern browsers, without having to immediately take care of modernizing your codebase. It is not meant as a long-term solution for web compatibility.
The best way to give your user the most ideal experience is to first use the HTML5 doctype:
<!DOCTYPE html>
That should be the first thing in your document; nothing should preceed it. From then on, use valid markup alone. Check your document for errors, unbalanced tags, redudant tags, etc. Remember, valid your markup regularly.
Only use the x-ua-compat header/meta-tag when you have legacy code that you cannot immediately replace/remove. In these scenarios, it is permissible to put your users in a legacy document mode:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The above will put the browser into Internet Explorer 9's Edge Mode, provided that mode exists. In versions of Internet Explorer prior to 9, the latest document mode will be used.
You can also stack these to show favor:
<meta http-equiv="X-UA-Compatible" content="IE=10,9,7,8" />
But please don't forget my primary message here - the above is meant only as a temporary solution. The ultimate goal is to get your document updated with modern code.
Microsoft Edge, Internet Explorer's successor, does not support document modes. Microsoft Edge will interpret your document like Firefox and Chrome do.
I have been reading up about document type emulating and compatibility mode in IE and have to say its quite a bit to get one's head around.
I have developed an App with Bootstrap 3 and Ember rendering a few pages controlled through a menu.
I tested this in all browsers, Webkit, Moz, and IE and all seemed perfect. I work in a large corporate, so when I decided to test it on some of my colleagues' computers, on IE, I got a blank page. Now I found that very strange because they were all running IE10 or IE11, although there is the odd IE9. I couldnt understand it because it renders perfectly on my IE.
So anyway, I started hitting F12 on their browsers and realised that many of them had IE7 emulating even though they were running IE10 or 11.
I read a bit about this issue, and I found the following:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
So I proceeded to add this line to my page so it is as follow:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
Now my question is this: Am I correct in assuming that if there was some sort of group policy set when using IE at work, that this workaround would solve the issue?
I will do some testing tomorrow morning, but just wanted to know if that is along the right lines?
Many people at work use Chrome and Firefox or whatever they want to, but there are obviously quite a few that use IE.
Take note that there must be a reason why the current group policy is set to enable compatibility mode (some other intranet app maybe) and that other app might stop working (or render badly) if you disabled it. If the admin have configured it in a way where that there's a Compatibility View list then you're in luck because all you need to do is not include your web app's URL into that list.
https://msdn.microsoft.com/en-us/library/ie/gg622935(v=vs.85).aspx
As for the document mode, I suggest for you to use this instead:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Setting the version to 'IE=edge' tells Internet Explorer to use the
latest engine to render the page and execute JavaScript.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
The only reason you want to "IE=EmulateIE9" is that your app is targeting the legacy document mode which in your case it isn't since you're using the latest web frameworks out there. I assume you want the best UI experience for your users.
I understand that in your case the IE versions vary and that some might not support "IE=edge". It will be just OK because it will fallback to the highest supported document mode. For example, IE8 with IE=9, IE=Edge, or IE=EmulateIE9 results in IE8 mode.
https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx
IE uses different security zones for different types of content. Stuff from the Internet is loaded in the Internet zone. Stuff from the local network is loaded in the Intranet zone. If you go through Internet Options, you can see that there are different security settings applied to the various zones.
If you're deploying the app through the network, then your app is likely loading the app in the Intranet zone (right click the page and then choose Properties to confirm).
By default, IE loads intranet pages in compatibility view, which is the same as using EmulateIE7 as the content value for the x-ua-compatible element. This means that, absent additional tagging/changes, your app is being treated as if it were being viewed in IE7.
If you need a specific document mode, you should be able to specify that mode directly in the content value, e.g, content="ie=9". If that doesn't help, then try adding an MotW to the page, so that the page is loaded in the Internet zone. In turn, this should allow the x-ua-compatible setting to take effect.
You can also change the Compatibility View Settings, provided they're not disabled through GPO, so that Intranet pages aren't automatically loaded in compatibility view.
Hope this helps...
-- Lance
I work with a company that hosts a fair number of websites in a Perl ASP backend and we're trying to make sure our client's websites don't display the compatibility view button on the address bar of Internet Explorer unless absolutely necessary.
I've found one thing that triggers the button right away, which is including a javascript (in our case Jquery) file in the head section before the title and meta tags. However it's difficult to determine what makes IE think it should display the button beyond that (I'm testing in IE 10).
In testing one site that had the button displaying, I copied the page source code into an html file and tried viewing it locally. With identical source code, the live page displays the button while the local copy does not. Does Microsoft maybe do something similar to Google where a webcrawler indexes sites that might need compatibility view?
I find it's hard to get a straight answers as to who is really in control of this button and what aspects of a webpage contribute to the issue. Any help is appreciated.
IE will display the Compatibility View button unless you hide it by specifying the document mode using X-UA-Compatible via a HTTP response header or META tag.
Try using this document compatibility mode meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...that forces IE to use its latest standards mode.
How can I force my IE9 to have the Document Mode of IE9 Standards?
Now, I have this meta content, but it seems it's not working.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Also, how can I know if my Document Mode already changed?
Thank you very much.
You state that the browser is defaulting to Quirks mode.
The correct solution to getting out of Quirks mode is to use a DOCTYPE.
Make sure that your HTML code starts with the following line:
<!DOCTYPE html>
This should be the first line of code, above the <html> tag.
The X-UA-Compatible flag is good thing to have, but isn't relevant to your problem in this case. It tells IE to switch between various compatibility modes, but Quirks mode is a whole separate thing, and is controlled by the existence or not of the doctype.
You should keep the X-UA-Compatible flag, although as I said in the comments, you would be better to set it to IE=edge rather than IE=9, otherwise you're going to have problems with IE10 and later.
Hope that helps.
[EDIT]
We have now established that the OP's site is running in a frame, inside another site that is in quirks mode.
This is a big problem because IE will render all frames in the same mode, so if the parent site is stuck in quirks mode then his site will also be stuck in quirks mode.
There is pretty much nothing that can be done about this, other than converting one or other site to be in the same mode as the other.
Converting the new code to run in quirks mode might be possible, but is very risky; I would strongly recommend against it. In any case, I would need to spend time studying the whole of your source code before I'd even be able to say whether it's possible or not, let alone how much work it is.
Converting the old code to run in standards mode is likely to be more achieveable. Again, it depends on how large the code base is, but the main point is that you don't need to worry about the conversion breaking due to unsupported features, because the site is already running in an old mode; moving to the newer mode might require some changes, but at least you can be fairly sure from the start that it is possible.
The only other option you have is to change your site so that instead of being in a frame, it pops out into its own separate window (or tab). This way, it can stay in standards mode and the old site can stay in quirks mode. This is the only option you have that doesn't involve a lot of work.
I guess the ultimate message from all of this is that quirks mode is a terrible thing. The world would be a much better place if all those old corporate systems out there running in quirks mode would be upgraded to use standards mode. It really is a lot less effort than people think, and will prevent nasty situations like this one.
use content="IE=edge" instead of IE=9 this will force your IE browser to stick to latest available
I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.
Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)
Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)
Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)
It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.
Works in IE9 documentMode for me.
Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:
whether the user has clicked the ‘compatibility view’ button in that domain before;
perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
whether the user has opted to put all sites in compatibility view by default;
whether IE thinks the site is on your intranet and so defaults to compatibility view;
whether the site in question is in Microsoft's own list of websites that require compatibility view.
You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.
As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
or the HTTP header:
X-UA-Compatible: IE=Edge
to get the latest renderer whatever IE version is in use.
I put
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
first thing after
<head>
(I read it somewhere, I can't recall)
I could not believe it did work!!
To force IE to render in IE9 standards mode you should use
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Some conditions may cause IE9 to jump down into the compatibility modes. By default this can occur on intranet sites.
I've posted this comment on a seperate StackOverflow thread, but thought it was worth repeating here:
For our in-house ASP.Net app, adding the "X-UA-Compatible" tag on the web page, in the web.config or in the code-behind made absolutely no difference.
The only thing that worked for us was to manually turn off this setting in IE8:
(Sigh.)
This problem only seems to happen with IE8 & IE9 on intranet sites. External websites will work fine and use the correct version of IE8/9, but for internal websites, IE9 suddenly decides it's actually IE7, and doesn't have any HTML 5 support.
No, I don't quite understand this logic either.
My reluctant solution has been to test whether the browser has HTML 5 support (by creating a canvas, and testing if it's valid), and displaying this message to the user if it's not valid:
It's not particularly user-friendly, but getting the user to turn off this annoying setting
seems to be the only way to let them run in-house HTML 5 web apps properly.
Or get the users to use Chrome. ;-)
The site at http://www.HTML-5.com/index.html does have the X-UA-Compatible meta tag but still goes into Compatibility View as indicated by the "torn page" icon in the address bar. How do you get the menu option to force IE 9 (Final Version 9.0.8112.16421) to render a page in Standards Mode? I tried right clicking that torn page icon as well as the "Alt" key trick to display the additional menu options mentioned by Rene Geuze, but those didn't work.
As an aside on more modern websites, if you are using conditional statements on your html tag as per boilerplate, this will for some reason cause ie9 to default to compatibility mode. The fix here is to move your conditional statements off the html tag and add them to the body tag, in other words out of the head section. That way you can still use those classes in your style sheet to target older browsers.
Looks fine to me:
You're sure you didn't on the settings globally or something? This is a clean installation of the beta on Windows 7. The developer tools report that the page is defaulting to IE9 Standard Mode.
I recently had to resolve this issue and here's what I did :
First of all, this solution is around tuning Apache server.
Second main think is that there's a bug in the IE9 which means that the meta tag will not work, instead of this solution try this
find/open your httpd.conf
uncomment/or add the following line
LoadModule headers_module modules/mod_headers.so
add the following lines
<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>
save/restart your Apache server,
browse to your page with IE9, use tools like wireshark or fiddler or use IE developer tools to check the header is there