) Two browser modes: quirks mode and strict Mode

Note: original author from javaeye: kino

View JSCodeSometimes you will see things about the quirks mode (weird mode) and strict mode (strict format), and I have never been very careful about what's going on, but it's just a bit fragmented, I can't take this kind of feeling recently. I decided to take a look at it.

1. quirks mode and strict mode are two modes for the browser to parse CSS, or they can be called resolution methods. Currently, browsers are supported in both modes..

2. historical reasons.

When the early browsers Netscape 4 and Explorer 4 parse CSS but do not comply with W3C standards, the parsing method is called quirks mode (weird mode ), however, as W3C standards become more and more important, many browsers begin to parse CSS according to W3C standards. We use strict mode to parse CSS following W3C standard ).

3. Although later browsers support strict mode, many browsers did not give up supporting quirks mode.

An important reason is that a large number of webpages developed in quirks mode can be correctly displayed. Therefore, when these browsers support two modes, when obtaining a webpage, a preliminary task is to determine the method used for parsing (the judgment condition will be described later ). Note: Explorer 5 still only supports quirks Mode

4. How does the browser determine which method to parse CSS?

The solution is to use the doctype statement. Most browsers use the followingJudgment Rules

• The browser needs to make the old web page work normally, but this part of the web page does not have the doctype Declaration, so the browser uses the quirks mode resolution for the web page without the doctype declaration.

• For web pages with doctype declaration, what browser uses what mode resolution, here is a detailed list can refer to: http://hsivonen.iki.fi/doctype/

• For webpages with doctype declarations, there are several simple rules for judgment:

For doctype statements that cannot be recognized by browsers, the browser uses strict mode resolution.

 

In the doctype Declaration, when no DTD declaration is used or the DTD declaration below html4 (excluding html4) is used, basically all browsers are rendered using quirks mode, otherwise, strict mode is used for parsing.

In this case, the vast majority of existing webpages with doctype declarations use strict mode for parsing.

In IE6, if there is an XML declaration before the doctype declaration (for example: <? XML version = "1.0" encoding = "iso-8859-1"?> ), The quirks mode is used for parsing. This rule has been removed from IE7.

5. Mozilla proposed almost strict moede, The difference with strict mode is:

The IMG element is inline in strict and block in almost strict mode. As we mentioned above, in most browsers, most doctype declarations trigger almost strict mode;

6. The biggest difference between the quirks mode and the strict mode is the explanation of the box mode.This is what we should pay attention to in Js.

What is the box mode?This is for block-level elements. I will just give you a brief description here (For details, refer to relevant materials ). To put it bluntly, we think of block-level elements as a box for loading things. The CSS attributes such as margin, padding, border, and width constitute the box mode.

 

The difference is that it is generated on the width attribute:

InIn strict Mode:

Width indicates the content width.That is to say, the true width of the element = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

 

InQuirks Mode:

Width indicates the actual width of the element., Content width = width-(margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

Here we will record the items related to the box mode.!

· Inline ElementSuch as <A> and <span>. Defining the upper and lower boundary does not affect the line height. The distance between the inline element and the element of the previous row is determined by the Row Height, instead of filling or boundary. Note 2: The Inline element (display: inline) does not need to be displayed in the new line, and does not force the line break of the subsequent element. For example, a, em, and span are all inline elements. An inline element can be a child element of any other element.

· Floating element (float left or right) boundary is not compressedAnd if the floating element does not declare the width, its width tends to 0, that is, the minimum width that can be compressed to its content.

· If there is no content in the box, even if the width and height are both 100% defined, it actually only accounts for 0%.So it will not be displayed. Pay special attention to this point when taking the layer layout.

· The boundary value can be negative, and the display effect may vary with browsers..

·Fill value cannot be negative.

· The default border style (border-style) is not displayed (none).

7. There is another difference between quirks mode and strict mode.But it was not verified. I just found this phenomenon.

InStrict ModeMedium,

The CSS attribute font-size of the table inheritsThat is to say, the font size in the table inherits the font size of the parent element.

InQuirks ModeMedium,

The CSS attribute font-size of the table does not inherit the parent element.. That is to say, the font size in the table does not inherit the font size of the parent element.

8. How can I determine in JS how the browser is parsed?
The document object has a property compatmode.It has two values:
Backcompat corresponds to quirks Mode
Css1compat corresponds to strict Mode