The effect of IE quirks mode (Quirks modes) on HTML pages

This article mainly describes the differences between the two document modes, Quirks mode and Standards mode, and gives some detailed examples to illustrate the differences. By reading this article, Web development engineers can have a deeper understanding of how browsers work, and avoid developing Web applications that have different effects on different browsers.

Quirks Mode Overview Definition

What is Quirks Mode? To put it simply, Quirks mode is a page rendering mode that the browser produces in order to be compatible with pages that were previously designed for older browsers and that are not strictly compliant.

History

Two document modes produced by the rendering engine

When it comes to Quirks modes, it starts with the browser rendering engine. We know that all browsers have their own page rendering engine, the rendering engine mainly consists of two parts, part responsible for HTML, CSS code parsing, the other part of the script code parsing, the two parts together can draw a complete page.

Table 1 each browser rendering engine composition

IE	Trident	--	Chakra
Firefox	Gecko	--	SpiderMonkey
Chrome	Webkit	WebCore	V8
Safari	Webkit	WebCore	JavaScriptCore
Opera	Presto	--	Carakan

As you can see from table 1, the main browsers in the market now use the Webkit rendering engine in addition to Chrome and Safari, and the other three browsers use their own different rendering methods (different HTML parsing, different JS parsing). For the time being, we're not going to discuss the differences in how different rendering engines draw the page, and the way that it renders the page is very different for each rendering engine as the version progresses.

IE is the first to propose Quirks mode and Standards mode (a model corresponding to Quirks), and then Firefox, Chrome, Safari, Opera and other browsers also support the two rendering methods. But only in IE users are free to switch between the two ways, and other browsers automatically match one of them. The following will mainly take IE as an example to illustrate the impact of Quirks Mode on page drawing, table 2 shows that IE with its rendering engine development, its rendering of HTML pages changed as follows.

Table 2 The development history of IE rendering engine td>10.0.x

Trident version	MSHTML.dll version	IE version	Update
unversioned	4.0.x	4	starting
unversioned	5.0.x	5	add support for CSS1 and change rendering to CSS
unversioned	5.5.x	5. 5	Fix the layout control of some CSS
unversioned	6.0.x	6	Correct the error of the box model and New toggle function for quirks Mode
unversioned	7.0.x	7	fix some CSS typographical errors and add to Pngal PHA Channel (Translucent)
4.0	8.0.x	8	first version tested by Acid2
5.0	9.0.x	9	First support for HTML5, SVG, CSS3, and new JavaScript engine
6.0		support CSS3 Multi-column layout, grid alignment, floating block layout, gradient

As can be seen clearly from table 2, with the development of IE, its rendering engine (earlier MSHTML.dll, later named Trident) is also adding new features and correcting some previous versions of the error. Before the official release of the IE6 in 2001, the market was mainly IE and Netscape Navigator two browser, and IE has a large user base, so most of the pages are designed for IE, but IE's rendering engine did not follow the specifications of the Internet, At that time, Microsoft had recognized the importance of the specification, so when IE developed to IE6, the rendering engine (MSHTML.dll) made an important change, the box mode of its original non-conformance to the specifications of the case model to the same as the standard (will be discussed in detail later) , as a result of this significant change, originally designed for the old version of IE HTML page is not displayed correctly, so when the IE6 released with a switch back to the IE5 page rendering, the function of the first proposed Quirks mode.

When the user needs to display the old version of the page to switch to Quirks Mode, then the browser's render engine switches to the IE5.5 version (MSHTML.dll 5.5.x), and box mode is drawn in the previous way, so that the page can be displayed correctly. When a user needs to display some new, web-compliant pages, the rendering engine switches to a standards mode (standard mode) corresponding to Quirks mode, in which the rendering engine is the current version, which also satisfies more specifications. The difference between the two mode is that it works in different versions of the rendering engine environment.

Finally, Quirks mode and standards mode together are referred to as the browser's document mode.

Third mode outside of Quirks and standards

In fact, there is a third pattern-almost standards mode in browsers mentioned above with Quirks and standards two document modes. This pattern is almost identical to standards mode, except that in some cases almost standards mode draws the page in the same way as Quirks. For example, when we need to split the image into a table cell, almost standards mode and Quirks mode use the same drawing method so that the picture does not appear as fragmented in standards mode.

However, this is only a rare case, in most cases almost standards and standards two modes are consistent, so we generally do not specifically distinguish between the two, we will refer to how to view the browser rendering engine information, in this information also on the almost Standards mode and standards mode are not differentiated.

There are two types of Quirks Mode

If we upgrade to the latest IE10, we will find IE10 in addition to IE7/8/9/10 Standards mode four standards mode, also has two Quirks mode:ie5 Quirks and IE10 Qu Irks. With the release of IE10, this new weird pattern IE10 Quirks is considered to be a better Quirks mode that supports the HTML5 specification. We can find that pages designed for HTML5 specifications (such as labels with <audio>, <video>, <canvas>, etc.) are not displayed correctly under Ie5quirks, but in IE10 Quirks can be displayed correctly. That is, IE10 Quirks exists for pages that are designed for HTML5, but that do not add a doctype (which can determine which mode the browser works in, which is discussed in detail later).

How to view Document Mode

In IE, the user can switch mode in developer tools, 1, IE10 Six document modes are displayed under the Document Mode menu, the user can directly select, the next chapter of the Demo we all use IE10 (version:10.0.920 0.16576) as a test browser.

Figure 1 IE Document Mode

In addition to viewing from developer tools, it is possible to learn the document schema from the property Compatmode of the Document object, which has only two values Backcompat and Css1compat, which corresponds to Quirks mode. Standards Mode. When you switch document mode in Developer tools, the page refreshes automatically and the value of compatmode changes.

How does the browser determine the document type?

In the previous section we know that IE users can change the document mode in developer tools. So, if the user does not have their own choice, when the browser is ready to parse, draw a page, how it determines the document mode? In fact, the browser before rendering the page will check two of content, one is whether the page has DOCTYPE information, and the other is whether the page has x-ua-compatible information.

Doctype detection

For an HTML page, <! Doctyp > declaration is located at the front of the

• When the DOCTYPE information is as follows, indicating that the page is in compliance with the HTML5 specification, the browser will choose standards Mode, this DOCTYPE is the most recommended, we usually design page should add this one doctype.

<! DOCTYPE html>

• When DOCTYPE is below, the browser will also choose standards Mode, although there are some differences from the first DOCTYPE, but can almost be considered the same.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

• When the doctype below, the browser will choose almost standards Mode, it is important to note that if you need to change this page to the HTML5 specification, then the above discussed in the <table> segmentation picture problem may be garbled.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

• When DOCTYPE is missing, the browser chooses Quirks mode, which is a very deprecated way, and we should try to avoid Quirks mode, which is a very bad place for a Web application.

X-ua-compatible Information

In addition to the DOCTYPE detection mentioned in the previous section, the developer of the HTML page can add x-ua-compatible information to the page's

Table 3 x-ua-compatible Impact Document types

x-ua-compatible	DOCTYPE	Document Mode
<meta http-equiv= "x-ua-compatible" content= "ie=5" >	No impact	IE5 Quirks
<meta http-equiv= "x-ua-compatible" content= "IE=7/8/9/10" >	No impact	IE7/8/9/10 Standards
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >	No impact	IE Latest version of standards
<meta http-equiv= "x-ua-compatible" content= "IE=EMULATEIE7/8/9" >	<! DOCTYPE html>	IE7/8/9 Standards
does not exist	IE5 Quirks
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie10" >	<! DOCTYPE html>	IE10 Standards
does not exist	IE10 Quirks

As can be seen from table 3, in general, x-ua-compatible is preferred over DOCTYPE settings, but when x-ua-compatible sets a situation like "Emulateiexx", the effect of DOCTYPE is also taken into account.

In addition, adding x-ua-compatible information in

Response.setheader ("X-ua-compatible", "Ie=edge"), <meta http-equiv= "x-ua-compatible" content= "IE=Edge" >

So far we have analyzed the history of Quirks mode, its impact on the browser, and how the browser chooses the document mode. In the next chapter we mainly discuss the differences between the rendered pages in two different document modes.

Page differences between pages in standard mode and in weird mode

In this chapter we mainly choose some typical examples to illustrate the effect of Quirks mode and Standards mode on page rendering.

Box model

As mentioned earlier, box mode is the main difference between the browser Quirks mode and standards mode.

Describe

The term "box model" does not have a clear definition of the document, it is a convention that developers describe block-level elements in CSS commonly known as.

Specifically, for a block-level element, such as <p>, <div>, <span>, and so on, the CSS specification defines a width and height, and 3 levels of boxes padding, border, and margin that surround it. These properties can be transferred to the box in our daily life to understand, so this model is called box mode. For box models, the definitions for height and width are different for different browsers.

For historical reasons, early Internet Explorer (ie 6) counted the box's padding and border into the box's size, a model known as the IE box model. As shown in the Model 2.1,

Figure 2 IE Box model

In the IE box model,

Box width = content width + padding left + padding right + border left + border right,

Box Height = content height + padding top + padding bottom + border top + border bottom,

In the standard box model, box size is the size of content, 3,

Figure 3 Standard Box model

Box width = content width,

Box height = content height,

This difference will result in a large difference in all block-level elements when the page is drawn, so the pages in the two different document modes differ greatly.

Sample Show

As shown in the following code snippet, we define a simple DIV element that sets its width and height to 500px, and defines border as 50px and red.

Listing 1

div.a{width:500px;height:500px;border:50px;border-style:solid;border-color:red;}

Run under IE 5 Quirks mode and IE 8 standards mode respectively, as shown in results 4 and 5. As you can see, the DIV under Standards mode is larger than Quirks mode, and its actual render size is 600px*600px.

Figure 4 IE 5 Quirks Mode

Figure 5 IE 8 Standards Mode

Vertical alignment of picture elements

The Vertical-align property in CSS is used to set or retrieve the vertical alignment of an object's content, which defines the vertical alignment of the base line of the element in the row relative to the base line of the row for that element. In a table cell, this property sets the alignment of the cell contents in the Cell box. The value can be baseline,sub,supper,top,text-top,bottom,text-bottom,middle and so on. What are the differences between baseline and bottom? Let's explain it in a diagram below.

Describe

CSS in order to determine the position of the line of text, define the following conceptual description, base line,bottom line,top lines, middle. Among them, base line refers to a line of the horizontal current along the base lines, baseline is not the bottom edge of Chinese characters, but the lower edge of the English letter E, bottom line, refers to the Chinese characters, or the English letter p,g the lower edge. As shown in 6.

Figure 6 Base Line concept

For inline elements and Table-cell elements, the Vertical-align property defaults to baseline in IE standards mode. When the contents of the inline element are only pictures, such as cell table-cell of table. Under IE Quirks mode, the vertical align property of the picture in the table cell defaults to bottom, so there will be a few pixels at the bottom of the picture.

Sample Show

As shown in the following code snippet, we define a row of two columns of table,table cell set to the width and height of the IMG image is 200px, in order to highlight the difference, respectively, define the cell and the picture's border color is blue and orange color.

Listing 2

Td.a{border-style:solid;border-color:blue;} Img.c{width:200px;height:200px;border-style:solid;border-color:orange;}

Run under IE Quirks mode and IE 8 standards mode respectively, as shown in results 7 and 8. Under Quirks mode, the picture in the table cell is aligned with the bottom of the cell, while in standards mode, there is a 3-pixel space between the picture and the cell.

Figure 7 IE Ten Quirks Mode

Figure 8 IE 8 Standards Mode

Fonts in the <table> element

In CSS, the properties that describe a font are font-family,font-size,font-style,font-weight, representing the family system, size, style, and thickness of the font, respectively.

Describe

In the CSS standard, the above attributes can be inherited. In IE Quirks mode, for table elements, some properties of the font will not inherit from the body or other enclosing elements into the table, especially the Font-size property.

Sample Show

As shown in the following code snippet, we define the body's Font property to be italic, red, bold, fantasy, and for the table element, its Font property is undefined.

Listing 3

body{font-style:italic;color:red;font-size:200%;   Font-weight:bold;font-family:fantasy;}

respectively, IE 5 Quirks mode and IE 8 standards mode run, Results 9 and 10 are shown. Under Quirks mode, the Font-size,font-style,font-weight property of the font in the table cell does not inherit the body, and only the family property is inherited. In standards mode, all attributes are inherited.

Figure 9 IE 5 Quirks Mode

Figure IE 8 Standards Mode

Dimensions of inline elements

There are two common types of elements in CSS, block-level elements and inline (inline) elements. The main difference between these two types of elements is that the block element usually continues to display as a separate piece, with a newline before and after it, while the inline element does not create a newline. According to the CSS standard, for inline elements, can be divided into replaced and non-replaced two categories.

Describe

What is the non-replaced inline element? First, we explain the following non-replaced element, for the elements defined in HTML, the default CSS formatting the outer range of elements, such as the IMG element, has its own width and height, we call it the replaced element, and other examples Input,textarea,select , object, and so on are all replaced elements. Elements other than these elements are non-replaced elements. Therefore, the inline element with the non-replaced attribute is a non-replaced inline element, such as a SPAN element.

Under IE standards mode, the non-replaced inline element cannot be customized, and in IE Quirks mode, the width and height properties of these elements are defined, which can affect the size and dimensions of the element's display.

Sample Show

As shown in the following code snippet, for highlighting, we define a SPAN element that is nested in an orange div with a background color that is both height and width 200px and the background color is blue.

Listing 4

Div.a{width:300px;height:300px;background-color:orange;} Span.b{height:200px;width:200px;background-color:blue;}

Run under IE 5 Quirks mode and IE 8 standards mode respectively, as shown in results 11 and 12. In Quirks mode, the span element is displayed normally, and the 200*200 blue block in the left image. In standards mode, the span dimension is zero.

Figure one IE 5 Quirks Mode

Figure IE 8 Standards Mode

Percent Height of element

The percentage height of the element in the CSS is defined as follows, and the percentage is the height of the element containing the block, not negative. If the height of the containing block is not explicitly given, the value is equivalent to "auto" (that is, depending on the height of the content). Therefore, the height of the percentage must be used when the parent element has a declared height.

Describe

When an element uses a percentage height, under IE standards mode, the height depends on the content change, while in Quirks mode, the percentage height is applied correctly.

Sample Show

As shown in the following code, to highlight, we define a table with a pink background, a table cell with a background of Orange Div B, and the height of the div set to 90%. Defines the child node C of B as a DIV element with a height and width of 200px, and a blue background.

Listing 5

Table.a{height:500px;background-color:pink;} div.b{background-color:orange;width:300px;height:90%;d Isplay:block;} Div.c{width:200px;height:200px;background-color:blue;}

Run under IE 5 Quirks mode and IE 8 standards mode respectively, as shown in results 13 and 14. In Quirks mode, Div B has a height of Talle cell 90%, while in standards mode, Div B's height is determined by its child node C, which is 200px.

Figure IE 5 Quirks Mode

Figure IE 8 Standards Mode

Handling of element overflow

The overflow property in CSS defines how the content of an element is handled when it does not fit the specified dimension. The default value is visible, which shows overflow.

Describe

In IE Standard mode, overflow the default value of visible, that is, overflow visibility, in this case, overflow content will not be clipped, rendered outside the element box. In Quirks mode, the overflow is treated as an extended box, that is, the size of the element is determined by its contents, the overflow is not clipped, the element frame is automatically adjusted, and the overflow content is included.

Sample Show

As shown in the following code snippet, we define a blue div A with a background of an orange div b embedded in a, set B's height of 400px greater than a height of 300px, causing a overflow.

Listing 6

Div.a{width:300px;height:300px;background-color:blue;} Div.b{width:200px;height:400px;background-color:orange;}

Run under IE 5 Quirks mode and IE 8 standards mode respectively, as shown in results 15 and 16. Under Quirks mode, div A has a height of 300px to 400px to fit the size of B, while the size of div a remains the same in standards mode, and the overflow portion remains.

Figure IE 5 Quirks Mode

Figure IE 8 Standards Mode

Conclusion

We already know from the previous description that the two document modes of Quirks and standards are very different when rendering the page, and these differences are mainly due to the difference in the development of the rendering engine with the standard of the web.

Knowing the existence and origin of these differences will be of great help to the work of Web engineers. In the development of new products, the WEB engineer should let the page meet the HTML5 specification and avoid the browser working in Quirks mode. Another point is that if you are maintaining a Web product that only works in Quirks mode, you can start from the root of the Quirks mode and consider how to improve the product back to standards mode so that you can add more and better features.

Article from IBM Devworks http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/

The effect of IE quirks mode (Quirks modes) on HTML pages