Summary of issues related to standard mode (strict mode) and quirks mode

The reason for the standard mode and the weird pattern

Before the standardization of HTML and CSS was completed, each browser had its own implementation of HTML and CSS parsing, and many of the old pages were designed in accordance with these nonstandard implementations.

After the HTML and CSS standards are determined, the browser on the one hand to the standard to implement the HTML and CSS support, on the other hand, but also to ensure the non-standard design of the old web-based compatibility.

As a result, modern browsers generally have two rendering modes: Standard mode and weird mode .

In Standard mode , the browser parses and renders the document according to HTML and CSS standards, while in the weird mode , the browser parses and renders the document according to the old non-standard implementation method.

In this way, for the old web page, the browser starts the strange mode, can make the old page normal display, for the new page, you can start the standard mode, so that the new page can use HTML and CSS standard features.

How the browser determines which rendering mode to use

Usually when you write a Web page, you will generally see the document type declaration on the head of the HTML document: DOCTYPE . (DTD Declaration)

When the browser encounters the correct document declaration , the browser launches the standard mode: The browser parses the execution code according to the standard of the web;

And for the old web pages, because the standard of the Web page was not determined at the time, so there is generally no document type declaration.

Therefore, for documents that do not have a document type declaration or a document type declaration is incorrect , the browser considers it an old HTML document:

Use the browser to parse the execution code in its own way, because different browsers parse the execution differently, so called the quirks pattern---parse and render the document using weird mode.

Common differences between the standard pattern and the weird pattern

• The processing difference of box model: in the strange mode, the box model is IE model, and the standard model is the box model.
  

• Vertical alignment of picture elements

  For inline and Table-cell elements, the default value for the Vertical-align property in standard mode is baseline, and in weird mode, the Vertical-align property of a picture in a table cell defaults to bottom. So there will be space at the bottom of the picture and pixels.

• The font in the element

  In CSS, properties for a font are inheritable. In the weird mode, for table elements, some elements of the font will not be derived from the inheritance of other encapsulated elements, such as body, especially the Font-size property.

• Dimensions of inline elements

In standard mode, the non-replaced inline element cannot be custom capitalized;

In weird mode, defining the width and height properties of these elements can affect the dimensions that these elements display.

• Percent Height of element

  The percentage height of the element in the CSS is specified: The percentage is the height of the element containing the block, not negative, and if the height of the containing block is not shown, the value is equal to auto, so the height of the percentage must be used in case the element has a high declaration.
  When an element uses a percentage height that is, in standard mode, the height depends on the content change, in the weird mode, the percentage height is applied accurately

• Handling of element overflow

  In the standard mode, the overflow value defaults to visible; In the weird mode, the overflow is treated as an extended box, that is, the size of the element is determined by the content, the overflow does not crop, and the element frame automatically adjusts to include overflow content.

Reference:

Https://www.jianshu.com/p/dcab7cde8c04

78010601

Summary of issues related to standard mode (strict mode) and quirks mode