What is the Quirks mode ?, Quirks Mode

What is the Quirks mode ?, Quirks Mode

What is DOCTYPE:

DOCTYPE, or Document Type Declaration (DTD ). Usually, DOCTYPE is located at the beginning of an HTML document

Location, before the starting tag of the root element HTML. In this way, you can determine the type of the current document before the browser parses the HTML document body to determine

Rendering mode (different rendering modes will affect the browser's parsing of CSS code and even JavaScript scripts ).

We often encounter this problem when writing programs. How to ensure that the original interfaces remain unchanged and provide more powerful functions, especially when new functions are incompatible with old functions. A common approach to this problem is to add parameters and branches, that is, when a parameter is true, we use the new function. If this parameter is not true, we use the old function, in this way, the original program will not be damaged and new functions will be provided. IE6 is similar in this way. It regards DTD as this "parameter", because no one on the previous page will write the DTD, so IE6 assumes that if the DTD is written, this means that the page will support a better layout for CSS, and if not, it will be compatible with the previous layout. This is the Quirks mode ).

Relationship between DOCTYPE and various modes:

Hybrid mode:

Do not write DOCTYPE

Approximate standard mode:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">

<! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Standard mode:

<! DOCTYPE html>

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

We can see that both transition-type HTML declaration and transition-type or framework-type XHTML declaration can enable the browser to enter the approximate standard mode. Meanwhile, the DOCTYPE of html5.

The format HTML declaration and strict XHTML declaration will enable the browser to enter the standard mode.

Performance differences in three modes:

First, the hybrid mode is not desirable because it has no compatibility. In IE (IE6 ~ In IE9), the hybrid mode uses the IE5.5 kernel to parse and render the page. Second, approximation criteria

The mode is compatible with some non-standard code based on the standard as much as possible, such as some obsolete labels. The standard mode is the best mode for implementing unified standards.

The tag must be closed (the only tag that does not need to be closed is the DOCTYPE tag). Discarded tags cannot be used. Currently, the most commonly used DOCTYPE is declared as a transitional HTML or

XHTML, because it is most compatible with some old code. However, technology-leading companies (such as google, facebook, and twitter) have already used html5

DOCTYPE Declaration, that is, <! DOCTYPE html>, which triggers exactly the same pattern as that triggered by strict HTML or strict XHTML, but the advantage is that it saves code and Works

Capacity (HTML5 era ).

1. In Quirks mode, the width and height of IE also include padding and border.

2. Set the height and width of the row element: In Standards mode, setting wdith and height for <span> and other row elements does not take effect, but in quirks mode, it takes effect. Margin: 0 auto sets horizontal center: Using margin: 0 auto enables horizontal center of elements in standards mode, but fails in quirks mode.In IE6/7 and IE8 (quirks mode), text-align: center can align block-level elements. In other browsers, text-align: center only applies to the content in the row.

A better way to solve this problem is to set "margin: 0 auto" for all block-level elements that need to be aligned to the parent container ". However, this mode is not supported in IE6, IE7, or IE8 hybrid mode. Therefore, you must set "text-align: center;" for the parent container ;".