DOCTYPE the strict mode and promiscuous mode of document declaration, how to trigger these two patterns, what is the meaning of distinguishing them?

(1) How to trigger two modes:
Add the XML header declaration, can trigger the IE browser quirks mode, after triggering, browser parsing mode is like IE5.5, with IE5.5 the same bug and other problems, behavior (Javascript) is the same.

(2) Trigger of IE6: Add XML declaration before doctype of XHTML,
<?xml version= "1.0" encoding= "Utf-8"?>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

(3) IE7 trigger: Add HTML comment between XML declaration and XHTML DOCTYPE
<?xml version= "1.0" encoding= "Utf-8"?>
<!--... and keep IE7 in quirks mode--
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

(4) IE6 and IE7 can be triggered: in HTML4.01 's DOCTYPE document header, add HTML annotations
<!--quirks Mode--<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

(5) Add <! at the top of the page DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > will trigger "weird mode"

(6) When you do not use DTD declarations or use HTML4 (not including HTML4) for DTD declarations, basically all browsers use quirks mode to render


how to determine whether it is the standard mode or the weird mode:

The following method executes the code
alert (Window.top.document.compatMode);
Backcompat means weird mode.
Css1compat indicates standard mode

Meaning:

The promiscuous mode of each browser is basically the private mode of each browser, not compatible with each other.
So, unless it is for compatibility issues, such as you do not want to modify a long time ago to do the IE only Web page, otherwise, deliberately trigger promiscuous mode does not make any sense.

Whether the distinction is a standard or a mixed mode, it is important to determine the page resolution using the "Standard box box model" or the "traditional box model".

box models in Mozilla Firefox and IE

In its interpretation, due to inconsistencies resulting in a difference of 2px width, its solution:
div{
Margin:30px!important;
margin:28px;
}
Note that the order of the two margin must not be written in reverse,!important this attribute IE6 unrecognized, but IE7 can recognize, and IE8 belongs to the standard browser type; Other browsers can be identified. So under the IE6, it actually explains:
div{
margin:30px;
margin:28px
}
Repeated definitions are executed according to the last one.

IE5 and IE6 's box explanations are inconsistent.

IE5 under div{width:300px;margin:0 10px 0 10px;}
The width of the div is interpreted as 300px-10px (right padding) -10px (left padding), the final div width is 280px,

On IE6 and other browsers, the div width is calculated as 300px+10px (right padding) +10px (left padding) =320px.

At this point we can make the following changes
div{
Width:300px!important;
width/**/:340px;
margin:0 10px 0 10px
}

What is this/**/ about? Also do not understand, only know IE5 and Firefox are supported, but IE6 not support.

DOCTYPE the strict mode and promiscuous mode of document declaration, how to trigger these two patterns, what is the meaning of distinguishing them?