Doctype, strict mode, and hybrid mode

Doctype, strict mode, and hybrid mode

<! Doctype> Document declaration, located at the beginning of the document, before the

Used to inform the browser of the mode in which the document is rendered.

Strict mode: page layout and js parsing are executed based on the highest standard supported by the browser (W3C.

Hybrid mode: not strictly in accordance with the standard mode, mainly used to be compatible with the old browser, backward compatible. Simulate the behavior of the old browser to prevent the old site from working. The transparency point is that the rendering mode of IE5.5 and earlier browsers can be implemented.

If the Doctype does not exist or the format is incorrect, the document is displayed in the mixed mode.

So the question is, what are the differences between strict mode and hybrid mode in style?

Difference: There are three differences in layout, style parsing, and script parsing.

1. Box Model: In W3C standard, if you set the width and height of an element, it is worth the width and height of the element content. In Quirks mode, the width and height of IE include padding and border.

2. Set the width and height of the row element: in standard mode, setting width and height for <span> and other row elements does not take effect, but in quirks mode, it takes effect.

3. Set the height of a percentage: in standard mode, the height of an element is determined by the content contained in it. For example, if the parent element does not set the height, setting the height of a percentage for a child element is invalid.

4. margin: 0 auto sets horizontal center: Using margin: 0 auto enables horizontal center of elements in standard mode, but fails in quirks mode. Solution: Use the text-align attribute:

Body {text-align: center ;}

# Content {text-align: left ;}

5. Setting the image padding in quirks mode will fail.

6. In quirks mode, the font attribute in the Table cannot inherit the upper-layer settings.

7. white-space: pre (Reserved blank) will be invalid in quirks Mode

The problem arises. Possible white-space values:

Normal default. Blank space will be ignored by the browser

Pre blank will be retained by Liu piqi. The behavior is similar to the <pre> label in HTML.

The nowrap text will not wrap, and the text will continue on the same line, until the <br> label is met.

Pre-wrap retains the blank character sequence, but line feed is normal.

Pre-line merges the blank character sequence, but retains the line break.

Inherit specifies that the value of the white-space attribute should be inherited from the parent element.