How to Set and differentiate the standard and weird modes of browsers

Source: Internet
Author: User

Due to historical reasons, there are differences in page rendering in various browsers. Even in different versions of the same browser, page rendering is different. Before the W3C standard was introduced, there was no unified specification for page rendering by browsers, resulting in a difference (quirks mode or compatibility mode). Due to the introduction of W3C standard, the browser provides a unified standard for page rendering (csscompat or strict mode or standars mode), which is the simplest difference between the two.
After the W3C standard was introduced, browsers began to adopt new standards. However, there was a problem: how to ensure that the old web pages can still be viewed before the standard came out, many pages are written based on the old rendering method. If the standard is used for rendering, page display exceptions will occur. To maintain the compatibility of browser rendering and make previous pages accessible, the browser retains the old rendering methods (such as Microsoft's IE ). In this way, quircks mode and standars mode are generated in browser rendering. The two rendering methods exist in one browser.

Firefox has been working in the standard mode, but the standard mode of IE (6, 7, 8) is very different from the weird mode, mainly reflected in the interpretation of the Box Model, this is very important, next we will focus on this. So what mode should the browser adopt for rendering? This leads to the DTD, which is the header Declaration of the Web page. The browser uses the corresponding rendering mode by recognizing the DTD:
1. The Browser needs to make the old web page work normally, but this part of the web page does not have the doctype Declaration, so the browser uses the quirks mode resolution for the web page without the doctype declaration.
2. For a webpage with doctype declaration, see http://hsivonen.iki.fi/doctype.
3. For webpages with doctype declarations, there are several simple rules for judgment: For those doctype declarations that cannot be recognized by browsers, the browser uses strict mode for parsing.
4. in the doctype Declaration, when no DTD declaration is used or the DTD declaration below html4 (excluding html4) is used, basically all browsers are rendered using quirks mode, otherwise, strict mode is used for parsing.
5. As you can say, the vast majority of existing webpages with doctype declarations use strict mode for parsing.
6. in IE6, if there is an XML declaration before the doctype declaration (for example: <? XML version = "1.0" encoding = "iso-8859-1"?> ), The quirks mode is used for parsing. This rule has been removed from IE7.
How to Set it to the weird mode:

Method 1: Add <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
Method 2: do not add anything.
How to Set it to standard mode:

Html4 provides three doctype options:
<! 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 // en" "http://www.w3.org/tr/html4/strict.dtd">

<! Doctype HTML public "-// W3C // dtd html 4.01 frameset // en" "http://www.w3.org/tr/html4/frameset.dtd">

Xhtml1.0 provides three doctype options:

(1) Transition type (Transitional)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

(2) Strict)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

(3) Framework (frameset)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

How to determine whether the current mode is a standard mode or a weird mode:

Method 1: execute the following code:
$.Zxxbox.remind(window.top.doc ument. compatmode );
// Backcompat indicates the odd mode
// Css1compat indicates the standard mode

Method 2: jquery provides the following methods:
$. Zxxbox. Remind ($. boxmodel)
$. Zxxbox. Remind ($. Support. boxmodel)

How to Set and differentiate the standard and weird modes of browsers

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.