How many browser modes are there? The difference between the browser s standard mode and the weird m

Generally, there are two, one is the chrome kernel for the speed mode, and the other is the IE kernel for the compatibility mode.

I don't really know what the difference is, but many times I can't open the web page with the speed mode, or there is a problem with the display when I open it, so I can solve it by changing to compatibility mode.

There are two. Turbo mode with chrome kernel Google.

The compatibility mode is the IE kernel of Microsoft.

The other 360 ones are based on the IE kernel.

One. Standard mode and weird mode.

Two. Distinguish. Box model

In weird mode, the browser's box model is a voltaic IE box model; And in standard mode. The browser's box model is a standard box model. The difference between the two is that the calculation of the width and height of the element is different.

IE box model

Standard box model

** Vertical alignment

Forinlinewithtable-cellelement, standard modevertical-alignThe default value for the property isbaseline

Spooky modevertical-alignThe default value for the property isbottom

Overflow handling of elements

Standard modeoverflowThe default value isvisible

Element overflows in weird mode are not cropped, and the size of the element is determined by its contents, which is automatically adjusted.

The size of the inline element

In standard mode, the width and height of the inline element cannot be customized, while in weird mode, width and height can affect its size.

table element

In CSS, font is inherited, but in weird mode, some of the font's properties will not be inherited from other elements such as body, especially font-size attributes.

The percentage width of the element

The percentage height of the element in CSS is specified: the percentage is the height of the block contained by the element, and cannot be a negative value; If the height of the containing block is not displayed, the value is equivalent to auto, so the percentage of height must be used if the element has a height declaration.

When an element uses a percentage of height is, in standard mode, the height depends on the content changes, in weird mode, the percentage height is applied accurately.

In standard mode: The browser parses and renders the document according to HTML and CSS standards;

In weird mode: The browser parses and renders the document according to the old, non-standard implementation.

So forLegacy web pages, the browser launchesSpooky modeto make the old web page display normally;

ForNew web page, you can startStandard modeto enable new web pages to use the standard features of HTML and CSS.

Two common differences between Standard Mode and Weird Mode

Handling differences in the box model

The width and height of the standard CSS box model are equal to the height and width of the content area, and do not include padding and borders, whereas browsers prior to IE6 implemented the width and height of box models to include padding and borders.

Therefore, for IE, the box model width and height calculation method is different between the weird mode and the standard mode;

Vertical alignment of inline elements

Many early browsers aligned ** to the bottom border of the box containing them, although the CSS specification required them to be aligned to the baseline of the box text.

In standard mode, Gecko-based browsers will be aligned to the baseline, while in Quirks mode they will be aligned to the bottom. The most direct example is the display of **.

In standard mode, it is not aligned with the lower border of the parent element, and if you look closely, you will see a small gap between the lower border of the parent element.

That's because in standard mode, ** is baseline-aligned. In weird mode, this is not the case.