[HTML] [IE compatibility] "Browser mode" and "Document Mode" test __html in IE

Before we have introduced IE "browser mode" and "Document Mode" difference, today we will look at a simple contrast test, see in different "browser mode" or "document mode", browser to the code rendering what will happen.

Effects in Browser mode:

In short, "browser mode" affects the browser version and IE's conditional annotation, "browser mode" will affect the server side of the browser version of the judgment, first look at the following code:

<!–[if IE 7]>
<style type= "Text/css" >
. Content{color: #F00;}
</style>
<! [endif]–>
<div class= "Content" > "browser Mode" is IE7, the font color is red and others are black. </div>

This is a very simple ie conditional annotation code, under the IE7 font color will be resolved to red, at this time we switch browser mode and keep the document mode unchanged, the effect as shown:

Visible, switching "browser mode" will have an effect on IE's conditional annotation.

In addition, "browser mode" for server-side access to the browser version of the good will also affect, look at the following code:

<script type= "Text/javascript" >

alert (navigator.appversion);

</script>

This is a very simple piece of JS code, the role is to output browser version information, used to detect the browser version, in different browser mode effect as shown:

Visible, the different browser mode causes the AppVersion value in JS different, namely the browser version information has changed.

"Browser Mode" There is another mode-compatibility view, found in the test, when the browser mode switch to change mode, IE7 annotation can trigger, JS display version number also for IE7, interested students can test themselves, here no longer tired.

Effects in Browser mode:

The "document Mode" affects the IE typesetting engine, which has an impact on the DOM rendering, and here's an example to see what the impact is, first or foremost, by looking at the code:

<style type= "Text/css" >
. content{#color: #F00;}
</style>

<div class= "Content" > Document mode is IE7, the font color is red and others are black. </div>

Here used hack, in IE6, 7, text font should be red, other browsers for the default black word, to keep the browser mode unchanged, the switch document mode, the effect as shown:

As you can see, the document mode has an impact on the CSS hack, that is, the "document Mode" switch will directly affect the rendering of the page, that is to say, the Trident engine, which is why IE's quirks mode is in the "document mode" switch rather than in "browser mode" The reason for the switch in quirks mode is that the box model is different from the standard in parsing.
Take another look at the following code:

<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7" >

Weeks are well known, the role of this code is to make ie8+ browser to IE7 the pattern to render the page, in order to achieve the purpose of forward compatibility, when we add this code in the page, browse the Web page, the effect of the image (IE9 browser):

The default document mode for the browser is set to IE7 or IE8, and the render mode is rendered in IE7 or IE8 mode, that is, insert in the page: <meta http-equiv= "x-ua-compatible" content= "ie=" Emulateie7″> This statement will directly affect the document mode, of course, users can manually switch the document mode, so that some incompatible with the new version of IE in the page after joining this statement can be better in the new version of IE browser browsing.

Via:jinsanshui Copyright NOTICE: Reprint, please indicate the original source of the article and author's information and this statement by hyperlink form
Article reference address: http://www.iefans.net/ie-liulanqi-wendang-moshi-xuanran-ceshi/Author: Iefans