Previous browser compatibility with IE6
1. The percentage height is applied accurately (IE6 is 100% height is 100% of the size of the outer box, now it is 100% of the content area of the outer box)
2. Set the width and height of the inline element to influence the size
2. The default value of vertical-align for the table cell is bottom
3. Some element font styles do not inherit the body setting, especially font size
4. Overflow: Hidden does not work in some cases
Solution: Standard rendering modes were born because they hindered the development of web design
Problem: Previously built sites do not support standard mode
Solution: Retain previous standards for parsing renderings (Promiscuous/weird mode -> browser backward compatibility)
Quirks mode
console.log(document.compatMode) //BackCompat
The standard model
Console. log(document.patmode) // css1compIn fact, modern browsers have disabled weird mode compatibility
What exactly is rendering?
Rendering: The process of converting a model (a program) into an image that can be seen by the user using specific software
Rendering engine: an internal set of methods for rendering images. The rendering engine allows specific methods to be executed to parse HTML/CSS code into images for display in a browser window.
The HTML and CSS code is parsed asynchronously to form a DOM tree and then a CSSOM tree, and then composited to produce a render tree, then a layout, and then a display
