I noticed something interesting about my website. It displays correctly when I have the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9"> in IE 8 and 7, but in IE 9 and 10, it does not display correctly. However, they are seen correctly when I go to Developer Tools and set the browser mode to IE 10 or IE 9 Compatible mode.
I was wondering, is there a way you can force IE 10 or IE 9 to automatically view the page in Compatibility mode without changing the mode in Developer Tools? If so, is there a Doctype or meta tag that can do this for me? I've done some research and I've only found Doctypes that allow you to view things in only standard mode, but I haven't found any Doctype that can allow you to view something in Cmpatability mode. Any help would be appreciated! Thanks!
There’s a couple of settings in IE 8 that can cause pages to render in Compatibility Mode, regardless of the page’s HTML content or HTTP headers:
Page > Compatibility View Settings
If “Display intranet sites in Compatibility View” is checked, then IE will render all sites on the local network in compatibility view. (This has happened to me a few times during development.)
If “Include updated website lists from Microsoft” is checked, then IE will download a list of websites from Microsoft and render them all in compatibility view.
If “Display all websites in Compatibility View” is checked, then, well, you can guess what happens.
Tools > Internet Options > Advanced > Browsing
If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.
And, finally, if you navigate to a page and then click on Page > Compatibility View (or click on the compatibility view icon in the address bar), then that page will be rendered in compatibility view.
So, although it’s worth putting X-UA-Compatible in there and using a doctype like the HTML5 one (so that your intentions are clear), always check these settings first when testing.
Source: The HTML5 doctype is not triggering standards mode in IE8
Related
I'm working on a legacy system that has a mishmash of browser dependent features (don't ask). The plan is to revamp everything to be current, but in the meantime, I need to figure out a way to make the following happen:
If the user has Browser Mode set to compatibility mode for this site or in general, I need to make the Document Mode IE8. This specific case I'm looking into, I'm using IE10. When you switch to IE10 Compatibility mode, the "page default" for the Document Mode is Internet Explorer 7. If I could just make the page default Internet Explorer 8, I think that would solve my case for now.
When I try to use in the header, it ALWAYS forces to IE 8 compat mode.
I realize this is a very strange way to do things, and it's only temporary until I can properly fix the insanity....
Which IE8 mode do you want? IE8 Standards mode or IE8 "use the <!doctype>" mode? If the former, set x-ua-compatible to IE8. If the latter, set it to EmulateIE8. (The various options, in gory detail, can be found here.
(The first value specifically chooses IE8 standards mode as the target mode; the second will pick IE8 standards mode if the page contains a standards mode <doctype> or IE5 quirks mode if the page doesn't contain a <doctype>.)
The key is knowing which legacy document mode that you need for the page. Figure that out and target that mode specifically. (Use the Emulation tab of the Developer Tools to switch between modes until you find the one that works.)
Note that if you deploy the page to an Intranet (right click, choose Properties, and then check out the Zone value), you may wish to add a Mark of the Web to the page so that it opens in the Internet zone and avoids the various defaults that behave otherwise.
I was wondering when I put my browser in compatibility mode, how does it know what setting to use from the header tags found in the document. If we have logic for all versions back to EI7, will it use the furthest back? So in this case, it chooses 7 in comp mode, but if we only offered back to IE8, then it would choose IE8 for that instance? So the question is, why does IE 11 compatibility mode set it to IE7 standards according to my debugger in IE? If I remove the [if IE7] code snippet, will it then set it to IE8 standards in the browser? We just quit supporting IE7 so am why I am asking this.
[if IE 7 ]> <html class="ie7"
[if IE 8 ]> <html class="ie8"
[if IE 9 ]> <html class="ie9"
In addition, the way you view your pages also affects the document mode.
If you view a page on the Internet (or through a local web browser), the page opens in the Internet zone. In this case, the x-ua-compatible directive takes precedence; depending on the setting, the <DOCTYPE> may also have an impact.
If you open the page using the File menu, from File Explorer, or from a network path, the page opens in the Intranet zone. By default, this means your page opens in IE7 compatibility mode, though that can be changed through settings.
Apps hosting the webBrowser control default to IE7 unless you override that using a registry change. (Note, it's currently unclear whether this is supported in Windows 10).
For best results:
Use the HTML5 <DOCTYPE> directive.
Use an x-ua-compatible meta with content set to IE=edge.
View local pages through a local webbrowser.
Code for HTML5, detect features, provide graceful fallback, and worry less about individual differences between individual browsers.
Hope this helps...
-- Lance
The code you've quoted in the question does NOT tell IE what mode to use. What this code does is look at the mode that IE is already in, and react accordingly.
Therefore, the answer to your question is: No: Removing the IE7-specific block from this code will not stop IE going into IE7 mode.
If you want to force IE to go into a specific mode, the code you need to use is the X-UA-Compatible meta tag.
You need a line near the top of you HTML that looks like this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Putting edge in the content tells IE to use it's best available mode (so IE11 will be in IE11 mode). If you want a specific IE mode, then put IE8 or similar instead of edge.
I found a lot of links that said adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or an older version of DOCTYPE forces the browser into compatibility mode. But after repeated attempts with many combinations, seems to me that all it does is alter the Document Mode and NOT the Browser Mode
I bet if you just remove your DOCTYPE tag completely or make it invalid that IE will be forced into compatibility view. Broken markup of some sorts will force this mode. However, this will surely have other negative consequences for non-IE browsers.
You would like to force IE into compatibility mode?
Also, I don't believe IE will display compatibility mode in the console window.
Are you sure you don't mean quirks mode?
The browser mode function (as I understand it) in IE isn't exactly compatibility mode.
I'm just going to copy/paste from the official documentation below.
Browser Mode
Description
IE9
IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View
IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.
IE8
IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE7
IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.
The only way to force this to change no matter what, is to set it on the virtual directory level through IIS in the 'HTTP Headers' section of the properties menu. Changing it here will force the browser into whatever mode you set it to, 100% of the time.
Changing the setting here overrides whatever browser mode is specified at the web page level.
You can't. The Browser Mode is intended to be used by developers to see what their browser would look like with new features disabled (for instance, if I put my IE10 into the IE8 Browser Mode, it will no longer support border-radius, or anything else that was added).
Since it's a developer tool, there is no need for it on the regular user's side.
The Document Mode, on the other hand, involves how the document is rendered, not how it is supported. I can have my document in IE8 mode and still have rounded corners because the browser mode supports it.
That being said, you should ALWAYS use this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If I see a site with a X-UA-Compatible header that contains anything else, I assume that the developer is a lazy bastard.
Can someone please explain the difference between IE8 browser mode and document mode in simple terms?
What causes the browser mode to change?
What causes the document mode to change?
If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
I am asking this because we are doing some IE8 testing here, and different people have different combinations of the modes, and i want to try to figure out how this is happening.
From this article on the IE8 blog, entitled How IE8 Determines Document Mode
The Developer Tools settings override all Document Modes for pages displayed in a tab.
The X-UA-Compatible meta tag and then header override Compatibility View Settings and the doctype unless the X-UA-Compatible value is EmulateIE7 or EmulateIE8.
The user’s Compatibility View Settings override the Microsoft Compatibility View List.
If none of the above rules apply, the doctype determines whether the webpage renders in IE8 Standards, IE8 Almost Standards or Quirks Mode.
So from that we get the following answers to your questions:
Q. What is the difference between browser mode and document mode in simple terms?
A. Browser mode is set in the developer tools to emulate different IE browser version behaviors while document mode is defined on the web page to tell IE to render the site differently for compatibility purposes.
Q. What causes the browser mode to change?
A. The user changes the browser mode in the dev tools.
Q. What causes the document mode to change?
A. The Doctype and the X-UA-Compatible meta tag and header set by the web developer.
Q. If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
A. The Browser Mode will stay, but if you change the Doctype and X-UA-Compatible, they will go back to what is defined on the page.
UPDATE: As Adrien Be points out below, IE9+ adds the ability to change the document mode in the dev tools via a setting which will persist on refresh.
See your answer in this page.
The documentMode property returns the mode used by the browser to render the current document.
IE8 can render a page in different modes, depending on the !DOCTYPE or the presence of certain HTML elements.
This property returns one of following values:
5 - The page is displayed in IE5 mode
7 - The page is displayed in IE7 mode
8 - The page is displayed in IE8 mode
9 - The page is displayed in IE9 mode
Note: If no !DOCTYPE is specified, IE8 renders the page in IE5 mode!
Browser Mode: Specifies the user agent sent by the browser to the Web Server. Rendering differences can occur if your JavaScript or back-end code renders differently based on the user agent string. For example, you may see JavaScript that checks navigator.userAgent. (Mozilla/5.0 (compatible; MSIE 8.0...) This value is also used to to process conditional comments ([if lte IE 9], [if gt IE 8], etc.). The Emulation tooling in IE 11 does not have a browser mode. It has a user agent drop-down instead.
Document Mode: Specifies the rendering engine used to process the markup. This is typically where we see rendering issues and browser incompatibilities. The original goal (for better or worse) was website owners could choose a document mode for their site via a meta tag. In IE 11, the emulation tools are less confusing.
Testing:
If your goal is to emulate an old IE8 browser, you should change both browser mode and document mode. The emulation is not perfect, so a more thorough option is to download free test VMs from Microsoft where you can test with a *real" version of IE 8, 9, etc.
What causes these values to change?
The Browser mode will not change. (Unless you change it in Dev tools.) It is set before making the request to the web server.
The document mode can change based on web server response. It can be changed via a X-UA-Compatible HTTP response header, the doc type, meta tags, Intranet sites, markup issues, etc.
There is a little button in top left , in IE dev tools -> emulation (tab) that says "Persist emulation settings"
see this :
"Settings persistence and reset
A Persist Emulation settings icon is added to the Emulation tool. This will maintain your current emulation settings until specifically disabled, allowing you to work, close the browser, and come back with your emulation settings intact. To its right is a Reset Emulation settings icon, which quickly resets the tool back to default values."
I am developing an HTML application and I was originally targeting IE7 because half of the company still had that particular version. They just upgraded to IE8 this week and I'm trying to get rid of any IE7 specific code.
One thing I noticed while using the IE developer tools is that when I view the home page on my local server, the Document Mode is set to IE8 Standards. If I view the same exact code base on my test server, it defaults to IE7 standards:
This is what I see when I look at developer tools on each server:
http://localhost:12345/
Browser Mode: IE8
Document Mode: IE8 Standards (Page Default)
http://webtest01/
Browser Mode: IE8 Compat View
Document Mode: IE7 Standards (Page Default)
What is causing them to be different on different servers?
EDIT
I think it is because Internet Explorer has a setting to display Local Intranet sites in Compatibility View. Is there a tag I can use to override this for my site?
IE is puts webtest01 in the Local Intranet Zone, which forces IE8 Compat browser mode/IE7 mode document mode.
I believe you can add a X-UA-Compatible HTTP header (or <meta> tag, so long as it's the first tag in your head), which should get the document mode into IE8 standards, but cannot fix browser mode, which has subtle implications for scripts.
To get IE out of compatibility browser mode, You have to go to Internet Options > Sercurity > Local Intranet > Sites and make sure everything is unchecked, or go to Tools > Compatibilty View Options and uncheck Display intranet sites in Compatibility View.