Doctype declaration, browser standard, weird Mode

Source: Internet
Author: User
ArticleDirectory
    • Trigger standard mode
    • Trigger weird Mode
    • Special method of writing X-UA-compatible
    • Almost standards mode)
    • XML mode-application/XHTML + XML content
    • Refer:
    • Summary:

I can see an interview question in the group. What is the significance of doctype standard (strict) mode and quirks mode?
It is also said to be a pen question, sweat.

Now I am more interested in the question preparation. So will sort out the answers (full marks are not guaranteed. In addition, if I did a pen exam and typed many Chinese characters every day, I could only show the examiner pinyin .. Although I can answer one or two questions, I am sure I have not provided details in this article ):

Trigger standard mode

1. Add the doctype statement, for example:
<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
<! Doctype HTML>
2. Set X-UA-compatible to trigger.

Trigger weird Mode

1. No doctype declaration or definition of the old html Version (below html4, for example, 3.2)
2. Add XML declaration, which can be triggered under IE6
<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype...>
3. Add HTML annotations between the XML Declaration and the XHTML doctype, which can be triggered in IE7. <? XML version = "1.0" encoding = "UTF-8"?>
<! -- Keep IE7 in quirks mode -->
<! Doctype...>
5. <! ---> Put it in <! Before doctype

IE8 has four modes: ie5.5 weird mode, IE7 standard mode, IE8 standard mode almost, IE8 standard mode X-UA-compatible setting:
1. Set X-UA-compatible Meta

Ie = 5, ie = 6 (any number between 5 and 6, such as 5.987654321): trigger ie5 weird mode (whether or not the page has doctype)
Ie = 7 (7 <= value <8): Force IE7 standard (whether or not the page has doctype)
Ie = emulateie7: Follow doctype (with DOCTYPE-IE7 standard; no DOCTYPE-IE5 weird mode)
Ie = emulateie8: Follow doctype (almost standard mode for DOCTYPE-IE8 (or IE8 standard mode); no DOCTYPE-IE5 weird Mode)
@ see: http://blogs.msdn.com /B/IE/archive/2008/08/27/introducing-compatibility-view.aspx
Ie = 8, ie = edge, ie = 99, ie = 9.9 (greater than or equal to 8): There is doctype-use almost standard mode, or IE8 standard; no doctype-IE8 standard.
if no X-UA-compatible, ie = IE8, ie = IE7, or IE = A, write X-UA-compatible after the or

Note 1: Write X-UA-compatible under the <link> or <SCRIPT> label. The setting of X-UA-compatible is invalid.
NOTE 2: When X-UA-compatible is set for the page and Server HTTP headers, use the X-UA-compatible settings for the page. The HTTP header value is used only when the page does not have X-UA-compatible.
NOTE 3: the meaning and trigger of almost standard mode are described in the "almost standards mode" below.
Note 4: For Ie = XX, ie will try to convert XX to the nearest value. For example, ie = 7.789-> Ie = 7;-> Ie = 5 between 5 and 6;-> Ie = 8 equal to or greater than 8.
Note 5: For Ie = 4, ie = 3, ie = 0.1, and IE =-7, these include Ie = IE8, ie = IE7, ie = IE6, ie = A, ie = B, and IE = BCD, which are the same as those without X-UA-compatible. It can be understood that X-UA-compatible has set an invalid value, so skip this step.

Some instructions on ie x-UA-compatible: http://expression.microsoft.com/en-us/dd835379

2. Set X-UA-compatible HTTP Header

Ie = 5, ie = 6: trigger ie5 weird mode (whether or not the page has doctype)
Ie = 7 (7 <= value <8): Force IE7 standard (whether or not the page has doctype)
Ie = emulateie7: Follow doctype (with DOCTYPE-IE7 standard; no DOCTYPE-IE5 weird Mode)
Ie = emulateie8: follows doctype (almost standard for DOCTYPE-IE8, or IE8 standard; no weird mode for DOCTYPE-IE5)
Ie = 8, ie = edge, ie = 99, ie = 9.9 (greater than or equal to 8): There is doctype-use almost standard mode (or IE8 standard); no doctype-IE8 standard.
Note: after X-UA-compatible (meta or HTTP header) is set, the Compatibility View settings of the client are overwritten. The mode set by X-UA-compatible is forced (preferentially ).
There is no X-UA-compatible, ie = IE8, ie = IE7, ie = A, and as mentioned in note 5 above: First Judge "Compatibility View ", there are "Compatibility View" Settings (doctype-IE7 standard, no doctype-IE5 weird mode); no "Compatibility View", there is doctype-Follow doctype, no doctype-ie5 weird mode.

Ie9 has seven modes: ie5.5 weird mode, IE7 standard mode, IE8 standard mode, IE8 standard mode, ie9 standard mode, ie9 standard mode, XML Mode

Ie9 and IE8 are roughly the same:
X-UA-compatible
Ie = (0 <= value <7)-trigger the weird mode (whether or not the page has doctype). Note: The weird mode here is a little different from that in IE8, the test found that the CSS hack characters "-" and "_" are identified in IE8, but not in ie9 "-".
Ie = 7 (7 <= value <8)-force IE7 standard (whether or not the page has doctype)
Ie = 8 (8 <= value <9)-force IE8 standard with doctype-use IE8 standard mode (or IE8 standard) with no doctype-IE8 Standard
Ie = emulateie7 and emulateie8 are the same as IE8.
Ie = 9, ie = edge (value> = 9)-have doctype-use almost standard mode (or ie9 standard ). Similar to IE8, doctype is used to select ie9 standard mode or ie9 standard mode; no doctype-IE9 standard.
Ie = (value <0), ie = IE8, ie = IE7, ie = IE6, ie = A, ie = B, ie = BCD, ie = xxx is similar to this unreliable, or write the X-UA-compatible Meta <link> or <SCRIPT> label, these situations are the same as those without X-UA-compatible: First Judge "Compatibility View", there are "Compatibility View" Settings (doctype-IE7 standard, no doctype-weird mode ); "Compatibility View" is not set. doctype follows doctype and doctype does not exist.

Special method of writing X-UA-compatible

As mentioned above in msdn, the value of X-UA-compatible is set to "Ie = 9; Ie = 8; Ie = 5", which means the first ie9 is given priority, IE8 is used without ie9, ie5 is used without IE8, and is not recommended in the production environment.
Trigger google chrome frame: <meta http-equiv = "X-UA-compatible" content = "Chrome = 1">
It can be used with IE's X-UA-compatible: for example, <meta http-equiv = "X-UA-compatible" content = "Ie = edge, chrome = 1">. The advantage of this writing: IE can render the page in the best rendering mode.
"Ie = edge, chrome = 1", can be written as "Chrome = 1, ie = edge", "Chrome = 1; Ie = edge ".

Almost standards mode)

Firefox 1 +, Safari, chrome, Opera (from 7.5), and IE8/ie9 added an "almost standard mode ", it implements the vertical size of traditional table cells (not strictly compliant with css2 specifications ).
This means, for example, the following Code :




for Example in IE7 standard mode, there is no blank between the bottom and the table of the image. There is no blank between the bottom and the table of the image in "almost standard mode; the newer browsers have blank spaces at the bottom of the standard mode slice and table.
@ see: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

The following doctype triggers IE8 standard mode:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
<! Doctype HTML>
Trigger IE8 in almost standard mode:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<! Doctype HTML public "-// W3C // dtd html 4.01 frameset // en" "http://www.w3.org/TR/html4/frameset.dtd">
Mac ie5, IE6/7, Opera (<7.5), and Konqueror have almost no standard mode (they do not strictly follow the css2 specification, in fact, their standard mode is closer to the standard mode ). HTML5 calls this mode "limited quirks mode )".

Articles about almost standard mode in IE, op, and FF:

Http://blogs.msdn.com/ B /ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

Http://www.opera.com/docs/specs/doctype/

Https://developer.mozilla.org/en/mozilla's_doctype_sniffing

XML mode-application/XHTML + XML content

In Firefox, Safari, chrome, and opera, when the Content-Type is set to application/XHTML + XML in the HTTP header, the XML mode is triggered. In XML mode, the browser will strictly parse the XHTML document using XML (very strict, users who have used W3C XHTML verification should understand that, for example, "&" use "&" + "amp;", <br> use <br/> ).
Parsing errors in any XHTML document will cause the parsing to stop. FF/SF/CH/OP will directly report an XML parsing error. ie9 can see an error in the console of the developer tool.
Macie5 and IE6/7/8 do not support application/XHTML + XML.
We found that using this mode in ie9, doctype does not matter, <HTML xmlns = "http://www.w3.org/1999/xhtml"> This namespace is required, without setting the namespace CSS will expire in text parsing.
In XML mode, X-UA-compatible settings are invalid.
@ See: http://www.w3.org/TR/html5/namespaces.html

Refer:

Http://hsivonen.iki.fi/doctype/#handling

Http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/()

Summary:

X-UA-compatible is identified only by IE> = 8, so they can use doctype declaration, X-UA-compatible, and Compatibility View settings to change the mode.
IE6/7 relies on doctype to change the standard or weird mode. Similar to the standard mode in these earlier browsers, IE6/7 is close to the standard mode in the "advanced" browser, because they do not strictly follow the css2 specification. In the standard mode, their rendering is still different. There is no difference in the emergence of CSS hack.
Under the IE6-IE9, the weird mode is under ie5.5.
You do not need to write X-UA-compatible. You can use CSS to completely resolve different ie versions.

Different modes and versions, not only different CSS parsing, but also different JS parsing.
Understanding the differences in browser resolution modes can prevent the code that we have written from getting hacked.
This allows developers to pay more attention to standards, both in terms of production efficiency and collaboration and communication.
Currently, almost everyone uses the standard doctype to declare documents, so the tangle of standard and weird patterns has little impact on work.

There are two errors in my Henri sivonen article:
1. Ie = 8 or IE = edge or IE = 99 or IE = 9.9: Enter "almost standard mode"
2. Ie = IE8 or IE = IE7 or IE = A or IE = emulateie8 or no or first script appears: Enter the "x-UA-compatible HTTP header"
The difference is described in detail above.

All the above mentioned items have been tested by myself. IE8 under win7 SP1 en and ie9 installed after the test are all original versions.
If you want to test the results of your own students can, use I previously wrote with CSS detection browser article: http://www.fantxi.com/blog/archives/browser_detector/for testing, first installed Win8 in ie9, then HTTP headerProgramOr Configure the server. I tested the code for one night ..
We recommend that you read the translations of Qin Ge, involving more knowledge and more comprehensive writing. I only tested the rendering mode of IE8/ie9.

 

Original article:

Http://www.fantxi.com/blog/archives/browser-mode/

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.