About HTML (ii)---------browser's standard 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

Knowing the origins of both of these rendering modes, the remaining question is how the browser can determine which mode to use. The bottom line is how browsers can differentiate old pages from new ones.
Usually when you write a Web page, you will generally see the document type declaration on the head of the HTML document: DOCTYPE . When the browser encounters the correct document declaration, the browser launches the standard mode, parsing and rendering the document according to the document type criteria established. 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. So, for documents that don't have a document type declaration or a document type declaration to be incorrect, the browser thinks it's an old HTML document that parses and renders the document with a weird pattern. For DOCTYPE more detailed explanation, please poke here DOCTYPE declaration function and usage detailed.

Two common differences between standard mode and weird mode

• box Model Processing differences: the width and height of the standard CSS box model is equal to the height and width of the content area, does not contain padding and borders, and the width and height of the box model implemented by IE6 before the browser contains padding and borders. Therefore, for IE, strange mode and Standard mode box model width and Height calculation method is not the same;
• vertical alignment of inline elements: Many early browsers align pictures to the lower border of the box containing them, although the CSS specification requires that they be aligned to the baseline of the text in the box. In standard mode, gecko-based browsers will align to the baseline, while in quirks mode they will align to the bottom. The most straightforward example is the display of the image. In standard mode, the picture is not aligned with the bottom border of the parent element, and if you look closely you will find a small gap between the picture and the bottom border of the parent element. That's because the standard mode, the picture is the baseline alignment. In strange mode, this problem does not exist. Please see this article for more details on CSS in-depth understanding of vertical-align and Line-height's base friendship.

Tsyeyuanfeng
Links: HTTPS://WWW.JIANSHU.COM/P/DCAB7CDE8C04
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

About HTML (ii)---------browser's standard mode and quirks mode