How to alter ie Browser Mode? - html

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.

Related

IE: Conditionally set Document Mode based on Compatibility Option

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.

Force IE8 emulation in IE10 iframe

My company recently migrated from IE8 to IE10
I need to emulate IE8 in order to display page properly in IE10
This is the structure of my page:
I want main page and iframe to render in IE8 mode, but only main page is rendered in IE8 mode (content in iframe is rendered in IE10 mode). In both main page and iframe content I have:
tag <!doctype html> and metadata X-UA-Comapatible: IE=EmulateIE8
If I run content of iframe separamelly it is rendered in IE8 mode.
How to force IE10 to use IE8 mode also in iframe?
The "emulate" values tell IE to follow the default behavior; that is, to use the mode it would normally use based on the document type declaration (doctype).
Since you're using the HTML5 doctype, this would lead IE to choose edge mode, the latest and greatest mode available to that version of IE.
To restrict things to a specific mode, specify that in your content attribute value, e.g. content="ie=8"
Note that you may need to do this for both the parent and the child iframe. (There's a specific set of parsing rules in certain versions that allow you to mix standards modes, but that's even more confusing, so it's best to be consistent throughout.)
See Specifying legacy document modes for more info.
Hope this helps...
-- Lance

Force IE Browser Mode into Compatibility mode?

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

IE10 treat content="IE=9" as Page Default Standard but not use them by default

I have site on ASP.NET 2.0. I need to force IE10 to render all pages in compatibility mode IE9. I add meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
And I see if I open some page and go to Developer Tools that Document Mode is "Standard" hoverer Page Default is "Internet Explorer 9". My question is: "How to force IE10 render page in "Page Default Mode"?
Here is screen shot.
Document mode is the rendering and javascript engine that IE uses. Browser mode is the useragent string that it sends to the server.
X-UA-Compatible (as a header or meta tag) tells IE which document mode to use (in your case IE10) but does NOT change the browser mode. This is because the browser needs to have already made a request before it sees the X-UA-Compatible. However unless you are doing server-side browser sniffing (hint, you really shouldn't) this should not be a problem.
If you are doing server-side sniffing it is possible to tell dissect the UA string as there are specific variants beyond the version the browser announces itself but unless you are doing something like analytics this is not going to be worth the hassle.
Seems that I try to fix the already fixed issue. Thanks all for reply. Tag <meta> works fine, maybe someone finds useful links:
how IE9 determinates Document Mode
IE Blog
IE’s Compatibility Features for Site Developers

Internet Explorer Mode Compatibility - Issue [duplicate]

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."