) Differences between quirks mode and standards mode

Suggestion: quirks mode is not recommended.

What happened in quirks mode?
Quirks mode is a browser (such as IE, Firefox, and opera) operation mode. Fundamentally speaking, the weird mode (also known as the compatibility mode) means that a relatively new browser deliberately simulates many bugs in the old browser, especially in ie4 and ie5.

Quirks mode is triggered by the Document Type probe method. This is also a well-known document type switch. This means that the browser checks the beginning of an HTML document to see if it contains a document type declaration required by the HTML specification.

The goal of quirks mode is to make the old page display what their authors want. The old page may be written using the known features of the old browser, or at least adapted to the old browser. For more information about the weird mode, visit quirksmode. org.

Quirks mode has no authoritative specification. After all, Quirk mode is a deliberate violation of CSS and HTML specifications. However, since the authors may need a description of what actually happens in the quirk mode, I wrote this document.

If you have an existing page, it looks valid but lacks a document type declaration at the beginning (as required by the HTML Specification ). However, you may not need to simply place a statement at the beginning. The reason is that the Declaration will make the browser work in a so-called standard mode opposite to the quirks mode. This may mean ignoring everything else. After you add a document type declaration, I will see that all the content on a page disappears. More often, the layout will change in an unexpected way. However, if you know what will happen in the quirks mode, the change will not be unexpected.

Before adding a document type declaration, you should use the validators and checkers to check HTML and CSSCode. This may not be enough, because the page may still rely on something effective in quirks mode. Therefore, you should test the page at least in standard mode of IE7 and firefox2. For example, if the page fails after a document type declaration is added, the list listed below may be useful for Problem Discovery.

When creating a new page, you do not need to know the quirks mode and do not need to think about it frequently. Simply write according to HTML and CSS specifications. This includes using a document type declaration to make the newer browsers work in standard mode. In addition, the document type declaration is placed at the beginning of each page. Because if something (or even a comment) is in front of it, some browsers will enter the quirks mode. (If you are using XHTML, it will be troublesome, but in more cases, you do not need to use XHTML in web pages for the moment .) However, if you decide to use some features that may be valid in the quirk mode, for example, using a height = "100%" attribute in the table element, check the following list to see if there are other possible meanings.

In quirks mode, the browser has followed the following method, although not all browsers display all of the following features:

L The box model is incorrect (it is different from the CSS specification, although it may be intuitive and more natural ). This means that the width and height attributes specify the size of the box element including the padding and border, not just the content of the element. (A demo will be provided later in this document .)

L the size of non-replaceable inline elements (for example, the default span element) is affected by the width and height attributes. (In css specifications, they are ignored ).

L The percentage height of the element (for example, the <Table Height = "100%"> or the table {Height: 100%} in CSS) is feasible, and the valid height is used as reference, even when closed, there is an automatic height (default ). In the standard mode, the height depends on the content requirements. However, when the closed mode quickly sets a specific height value, the percentage height is valid.

L overflow is treated as an extended box. When the content of an element is not suitable for a specified size (explicit or hidden), overflow: visible (default) means that content overflows when the box size is specified. In quirks mode, the size changes. This can be simply taken as an example if the box has a background color or a border.

L in quirks mode, the root element in IE is the body element. According to the specification, it is an HTML element. For example, in quirks mode, setting a margin for the body is invalid. In another example, by default, ie has a vertical scroll bar, although it is not active (dull) when nothing can be rolled. In quirks mode, you can delete the body by setting {overflow: auto;} (when you do not need it), but in standard mode, you still need to add HTML {overflow: auto ;}.

L when an IMG or input type = "image" element is set in CSS, the padding attribute of the image element is ignored.

L by default, the horizontal margin of floating images is 3 pixels (instead of 0 ). That is to say, if the IMG element has the align = "Left" or align = "right" attribute or has float: Left or float: right applied to the IMG element in CSS, the browser will think that the IMG element has the property of "hspace =" 3 "(or its value of" margin-left "and" margin-right "is 3 ). This is an application in IE. In other browsers, the quirks mode may cause additional margin on one side of the image. Its width is 2 pixels rather than 3 pixels.

L The vertical alignment of an image is closed at the bottom of the quick, not the bottom line of the text in some specific cases. This is the case when an image is the only content in an element. It is typically a table cell. This means that, for example, in quirks mode, the images in the table cell are at the bottom of the cell by default (this is often what the author wants). However, in standard mode, there will be several pixels of space at the bottom of the image (unless there is a setting, for example, setting vertical-align: bottom for the IMG element ).

L in CSS, using margin: 0 auto to center a block is invalid. Note: in IE (or even IE7), set align = "center" for div in HTML or text-align in CSS: center is incorrectly centered within the block element as a whole, even in "standard mode.

L The font attribute does not inherit from the body or other closed elements to the table. Especially font-size. The font, color, and line height are also possible. For example, if you set the body {font-family: Arial}, it is very likely that the font attribute is still the default in the browser in the table cell.

L set the font size in the table cell. A percentage value is interpreted as relative to the basic font size of the browser, rather than the font size set by CSS in the closed element (Form row.

L The font size keyword is incorrectly interpreted, So medium is slightly larger than the basic font of the browser, and small is equal to the basic font. Similarly, the entire proportional keyword, XX-small, X-small, small, large, X-large, and XX-large are incorrectly interpreted one by one: each value is interpreted as a level greater than it would have been.

L malformed attribute values are often interpreted based on guesses. For example, margin: 10 is used as margin: 10px, and color: ffffff is used as color: # ffffff. In CSS, these command error handling rules violate the rules: syntax errors should be ignored.

L in CSS, uppercase and lowercase letters are considered unimportant in the class and identifier selector. Therefore, the selector is used. foo matches an or style = "margin: 0 cm 0 cm 0pt 52.5pt; Vertical-align: baseline; text-indent:-31.5pt; MSO-list: l0 level1 lfo1; "> L malformed names are accepted in the class and identifier selector. In particular, names starting with one or more characters (for example, in the selector,. 123a and #42) are accepted.

L declaration white-space: Pre will be ignored.

L fixed position not supported: Declares position: fixed as position: static (in IE7 ).

L many CSS support (such as the max-width attribute and attribute selector) are not used in IE7 in quirks mode. That is to say, many CSS features are not supported in IE6 and are supported in IE7, but only in standard mode. To view the Microsoft blog, go to details on our CSS changes for IE7.

L tag hodgedge parsing. For example, if a document contains <p> text <Table>... </table>, in Firefox, the P element contains the table element in quirks mode. In standard mode, the start label of the table implicitly closes the open P element. The difference is that, for example, you set a border in the P element. Similarly, Firefox accepts ul in font. In these cases, ie often works under wrong rules or even in standard mode. However, standard consistency can be obtained using valid tags, and clear end tags are often used, like </P>, even when they are formal operations.

L blank between elements is important. For example, you have a link ticket. Typically, you can write Li element tags between form items. (That is, between the </LI> and <li> labels ):

<Ul> <li> <a...>... </a> </LI> <li> <a...>... </a> </LI>... </ul>

However, if you set display: block and set a border for the link element, you may end with the vertical gap between items. This will happen in quirks mode in IE7 and often in earlier versions of IE. On the other hand, in IE quirks mode, if you set display: Inline for the Li element in the above mark, there will be no blank between items. In standard mode, there will be a blank space in other browsers. This is regarded by some browsers as standard consistency.

L in Mozilla Firefox, the form has a default bottom margin of 1em. (In IE, there is such a margin in both modes .) This obviously inherits the traditional Web browser and leaves a lot of space under a form. How to remove the blank lines below a form is a frequently asked question.

L vertical margin is forbidden in some environments. For example, when a P element appears as the first element in a TD element. This is more or less a traditional behavior. In IE7 mode, he is replaced. (In IE8, it is only replaced in quirks mode ).

L it is good to mark the WBR as a line feed. It is widely supported by browsers. However, in IE8, the standard mode is missing. This is bad message, because the <WBR> tag is always the only valid hint line feed method in other non-interrupted strings on the webpage.

L mozilla (( firefoxand seamonkey have some additional features and are archived in quirk.css. For example, the default color of table border is gray (in most browsers), and the opposite color is used in standard mode. Among these problems, quirks mode is indeed a different compatibility mode. Note: In that document, not all settings can be applied to all versions of Mozilla.

This list is probably not comprehensive. This is mainly related to IE7. Other browsers may have quirks mode similar to the old IE version.

 

In quirks mode, the width attribute is (incorrectly) used to specify the width of the entire element block. In this example, It is 8em. In standard mode, it specifies the width of the content in the element, so the width of the entire box is 12em (with the width of the edge ). That is to say, the total width contains the blank spaces on the left and right, and each is 2em.

In Firefox, the box model can be correctly applied in two modes. However, you can still use the CSS command in quirks mode in IE or in Web Developer extention (it is a useful tool in CSS-related cases) use the border box model to simulate incorrect box model.