Shulou(Shulou.com)06/02 Report--

This article mainly shows you the "HTML document type DTD and browser weird pattern example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "HTML document type DTD and browser weird pattern example analysis" this article.

After obtaining the web page from the server, the browser will display the web page according to the DOCTYPE definition of the document. If the document is correctly defined, the DOCTYPE browser will enter the standard mode (Standards Mode), otherwise the browser will enter the weird mode or mixed mode (Quirks mode).

The web page standard advocated by W3C in the early stage of browser development is not popular, so the browser has a unique parsing mode for web page tags or attributes. with the popularity of web page standards in the future, browsers add support for new standards (Standards Mode), but do not give up compatibility with the original mode (Quirks mode), which is the source of many browser performance modes.

When Microsoft started developing standards-compliant browsers, they wanted to ensure backward compatibility. To achieve this, future versions of their IE6.0 embed two modes of expression in browsers: Standards Mode (standard mode or Strict Mode) and Quirks mode (weird mode or compatible mode Compatibility Mode). In standard mode, browsers display pages according to the specifications set by W3C, while in weird mode, pages are displayed as IE5 or even IE4 to keep the previous pages displayed normally.

The biggest problem with these two modes is the box mode, or now people have ignored the existence of IE5, but the box mode that IE runs in weird mode is still retained in the latest version of IE, and even there are multiple modes for developers to use in IE6-IE10. In fact, in order to maintain compatibility with a potentially large number of web pages, modern web browsers generally have a variety of rendering modes: standards mode pages render as defined by HTML and CSS, while in quirks mode they try to simulate the behavior of older browsers. Some browsers (for example, those based on Mozilla's Gecko rendering engine, or Internet Explorer 8 under strict mode) also use a "near-standard" (almoststandards) mode that tries to compromise between the two, implementing a strange behavior of table cell size, in addition to meeting the W3C standard definition.

IE box model defect

(InternetExplorer box model bug) refers to the method of resizing web page elements in earlier versions of IE, which is different from the standard way recommended by W3C for cascading style sheets (CSS) language. In IE6, browsers support an optional rendering mode (called "compliant standard mode") that addresses this difference. However, for backward compatibility reasons, all versions of IE (as of IE 9 and IE 10 Developer Preview) still behave in the usual, non-standard mode by default. Internet Explorerfor Mac is not affected by this non-standard behavior. In addition, Internet Explorer 10 has changed its default weird mode in its Consumer Preview to a more specification-compliant weird mode similar to non-IE browsers.

Differences and examples between patterns

Most of the differences between Quirks and Standards can be attributed to the difference between IE5 and IE6.

A prominent difference between Quirks mode and standard mode is the handling of defects in the CSS IE box model. Prior to version 6, InternetExplorer used an algorithm that determines the width and height of the box model of an element, which conflicts with the CSS specification, and because of the popularity of InternetExplorer, many web pages that rely on this incorrect algorithm are created. In version 6, Internet Explorer uses the CSS specification algorithm when rendering in standard mode, while the previous non-standard algorithm is used in quirks mode.

Another difference worth mentioning is the vertical alignment of some inline (inline) elements; many early browsers aligned images to the bottom border of the box that contained them, although the CSS specification required them to be aligned to the baseline of the text in the box. In standard mode, Gecko-based browsers will align to the baseline, while in quirks mode they will align to the bottom.

In addition, many early browsers did not inherit font styles within the table; as a result, font styles must be specified once for the entire document as a whole and again for the table, although the CSS specification requires font styles to be inherited into the table. If the font size is specified in relative units, a standards-compliant browser inherits the base font size and then applies it to the relative font size within the table: for example, a page that declares a base font size of 80% declares that the table is 80% (to ensure 80% font size in a browser that inherits the font size incorrectly). Displays a form with 64% font size in a standards-compatible browser. As a result, browsers typically do not inherit font sizes on tables in weird mode. .

The box model of IE6 IE7 is exactly the same in weird mode, that is, width=width.

The box model of IE6 IE7 is exactly the same in standard mode, that is, width=width+padding+border.

Code example http://bbs.blueidea.com/thread-2839403-1-1.html

In strict mode:

Width is the content width, that is, the true width of the element = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

In quirks mode:

Width is the actual width of the element, content width = width-(margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

The difference between "Quirks mode and strict mode" in weird mode CSS

Differences on javascript

Here are some important differences:

1) the height and width of the box model include the inner margin padding and the frame border

In the W3C standard, if you set the width and height of an element, it refers to the width and height of the content of the element, while in IE5.5 and below browsers and other versions of Quirks mode, the width and height of IE also include padding and border.

2) you can set the height and width of the elements in the line

In Standards mode, setting wdith and height to inline elements such as span will not take effect, while in quirks mode, it will.

3) the height of the percentage that can be set

In standards mode, the height of an element is determined by the content it contains, and if the parent element does not set the height, it is invalid for the child element to set a percentage height.

4) setting horizontal center with margin:0 auto will fail under IE

Use margin:0 auto to center elements horizontally in standards mode, but fail in quirks mode. The solution in quirk mode is to use the text-align attribute:

Body {text-align:center}; # content {text-align:left}

5) setting the padding of an image in quirk mode will fail.

6) the font properties in Table in quirk mode cannot inherit the upper settings.

7) white-space:pre will fail in quirk mode

Close to standard mode

A third compatibility mode called "near Standard Mode" (almoststandards mode) or "strict Mode" (strictmode), which maintains vertical resizing of "traditional" table cells according to the CSS2 specification, has been implemented in these browsers: Safari, Opera 7.5 (and above), all Gecko-based browsers (such as Firefox) and Internet Explorer 8.

The rendering of "close to standard" mode and the "standard" mode match in all details except for one thing. The layout of the images inside the table cell is handled in the same way as the "quirks" mode, rather than by standard, which is quite consistent with older (en) browsers such as Internet Explorer 7 (and earlier). This means that the layout of images in the table is less likely to fall apart in a browser in "quirks" or "near standard" mode than in "standard" mode.

Trigger different rendering modes

DOCTYPE, abbreviated as DTD, is the abbreviation of English DocumentType Definition and Chinese "document type".

The DOCTYPE tag appears separately

Description:

Document type, which causes the browser to load the web page using the appropriate standard and display

The document type is defined in the first line of the HTML document, before the html tag

The document does not define a DOCTYPE, and the browser will not be able to learn the type of the HTML or XHTML document, so it will enter chaotic mode.

Typically, browsers describe the existence of DTD based on the file type on the page to decide which rendering mode to use; if there is a full DOCTYPE, the browser will use standard mode, and if it is missing, the browser will use weird mode. For example, a web page that starts with the following DOCTYPE will trigger standard mode:

The following DOCTYPE is syntactically invalid because it contains the public identifier keyword PUBLIC but does not have a public identifier (indicating the name of the version of HTML used) and there is no system identifier URL defined by the HTML document type. This will trigger a weird mode:

In addition, a web page without any DOCTYPE will be rendered in quirks mode.

One notable exception to this is Microsoft's Internet Explorer 6 browser, which renders a page in quirks mode if DOCTYPE has a XML declaration before it, regardless of whether the full DOCTYPE is specified or not. So XHTML pages that start with the following code are rendered in quirks mode by IE 6:

The above code is useful to some extent, but it only triggers a weird pattern for IE 6.

If there are any statements before DOCTYPE, quirks mode will also be triggered in any version of IE (as of IE 9). For example, if a hypertext file contains a comment or any tag before DOCTYPE, IE (as of 9) uses quirks mode:

The problem with the XML declaration is resolved in Internet Explorer 7, where the XML declaration is simply ignored. However, for maximum compatibility with existing and earlier web browsers, the World wide Web Consortium, an organization that maintains the XML specification, suggests that authors of XHTML files consider omitting the XML declaration.

Differences in JavaScript

Table of measurements of Quirks mode

Click to open the link

MSDN

Document in DOM has an attribute called compatMode, and its return values are BackCompat and CSS1Compat, corresponding to quirks mode and strict mode, respectively.

Function detectMode () {

Varmode=document.compatMode

If (mode= "BackCompat")

Alert ("currently rendering the page as quirks mode")

Elseif (mode= "CSS1Compat")

Alert ("how the page is currently rendered with strict mode")

Elsealert ("browser version does not support compatMode")

}

Previous versions of IE8 compatMode only depend on the fact that DocType,IE8+ does not recommend using compatMode judgment, but recommends using documentMode, http://msdn.microsoft.com/en-US/library/cc196988.aspx

Commonly used browser presentation modes

IE

IE includes two modes: standard mode (Standards Mode) and weird mode or hybrid mode (Quirks mode).

Abbreviated as IE (S) and IE (Q)

FireFox

FIreFox includes three modes: Full Standards Mode, Almost Standards Mode, and Quirks Mode. For a description of these three modes, see Mozilla's DOCTYPE sniffing

Opera

Opera includes three modes: Quirks, Standards, and Almost Standards. For a description of these three modes, see DOCTYPE Switches supportin Opera

When you do not use DTD declarations or use DTD declarations below HTML4 (excluding HTML4), almost all browsers use Quirks Mode rendering.

Comparison of document types

Henri Sivonen compiles a list of different document types and how they are treated in the most common browsers, showing whether pages are rendered in weird (Q), standard (S) or near-standard (A) mode. The criterion close to standard mode is the rendering of non-standard table cell height. This table applies to content where Content-Type is text/html. Content-Type is application/xhtml+xml content in Chrome, Firefox, InternetExplorer 9 (and 10), Safari and Opera are rendered in standard mode. Internet Explorer 6, 7, and 8 do not support Content-Type for application/xhtml+xml.

Doctype

NS6

Mozilla0.9.5-1.0

IE 8 +

Firefox

Chrome

Safari

Opera 7.5 +

Netscape 7 +

Mozilla 1.0.1 +

Konq 3.5 +

HTML5spec

IE 7

Opera 7.10

IE 6

Opera 7.0

Mac IE 5

Konq 3.2

***

Q

Q

Q

Q

Q

Q

Q

HTML 3.2

Q

Q

Q

Q

Q

Q

Q

HTML 4.01

Strict

There is a system identifier

{`text`} S

{`text`} S

{`text`} S

A

A

A

A

No system identifier

{`text`} S

{`text`} S

{`text`} S

A

A

Q

A

Transitional

There is a system identifier

{`text`} S

{`text`} S

A

A

A

A

Q

No system identifier

Q

Q

Q

Q

Q

Q

Q

HTML5

Q

{`text`} S

{`text`} S

A

A

A

?

XHTML Basic

There is a system identifier and no XML declaration

{`text`} S

{`text`} S

{`text`} S

A

A

A

A

XHTML 1.0

Strict

There are system identifiers and XML declarations

{`text`} S

{`text`} S

{`text`} S

A

Q

A

Q

There is a system identifier and no XML declaration

{`text`} S

{`text`} S

{`text`} S

A

A

A

A

No system identifier and no XML declaration

{`text`} S

{`text`} S

{`text`} S

A

A

A

?

Transitional

There is a system identifier and a XML declaration

{`text`} S

{`text`} S

A

A

Q

A

Q

Have system identifier, no XML declaration

{`text`} S

{`text`} S

A

A

A

A

Q

No system identifier, no XML declaration

{`text`} S

{`text`} S

A

A

A

A

?

XHTML 1.1

There are system identifiers and XML declarations

{`text`} S

{`text`} S

{`text`} S

A

Q

A

Q

Have system identifier, no XML declaration

{`text`} S

{`text`} S

{`text`} S

A

A

A

A

Doctype

NS6

Mozilla0.9.5-1.0

IE 8 +

Firefox

Chrome

Safari

Opera 7.5 +

Netscape 7 +

Mozilla 1.0.1 +

Konq 3.5 +

HTML5spec

IE 7

Opera 7.10

IE 6

Opera 7.0

Mac IE 5

Konq 3.2

Schema verification

In most browsers, the extended document.compatMode of the document object model indicates the rendering mode of the current page. In standard mode and near standard mode, document.compatMode contains the value CSS1Compat, while in weird mode it is BackCompat.

In addition, the rendering mode of a given page in MozillaFirefox and Opera is also indicated in the information box of "Page Information". In Internet Explorer 8 and later IE, the document schema is displayed in the Internet Explorer developer tool and can be changed by the user. There is also a private JavaScript extension for document.documentMode in Internet Explorer, which takes one of 5, 7, 8, 9, 10 floating-point variables.

The above is all the content of the article "sample Analysis of HTML document types DTD and browser Weird patterns". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.