Standard mode and weird mode

Standard mode and weird mode

Due to historical reasons, each browser has different rendering on the page, and even the same browser in different versions, the page rendering is not the same. Before the introduction of the world standard, the browser has no uniform specification on the rendering of the page, resulting in a difference (Quirks mode or compatibility mode); Due to the introduction of the world standard, browser rendering page has a unified standard ( Csscompat or Strict mode is also called Standars mode), which is the simplest difference between the two.

After the introduction of the standard, the browser began to adopt the new standards, but there is a problem is how to ensure that the old page can continue to browse, before the standard comes out, many pages are based on the old rendering method, if used by the standard to render, will cause the page to show an exception. In order to maintain the compatibility of browser rendering, so that the previous page can browse normally, the browser retains the old rendering methods (such as: Microsoft's IE). In this way, Quircks mode and standars mode are generated on the browser rendering, and there is a common browser for both rendering methods.

Firefox has been working in standard mode, but IE (6,7,8) standard mode and strange mode is very different, mainly reflected in the box model interpretation, this is very important, the following focus on this.

So what kind of mode does the browser use to render? This leads to the DTD, which is the head declaration of the Web page, and the browser uses the corresponding rendering pattern by identifying the DTD:

1. The browser to make the old page work, but this part of the page is not DOCTYPE declaration, so the browser does not doctype the declaration of the page using Quirks mode parsing.
2. For Web pages that have a DOCTYPE statement, what kind of browser is the mode of resolution, here is a detailed list for reference: http://hsivonen.iki.fi/doctype/
3. For Web pages with DOCTYPE claims, here are a few simple rules that can be used to determine: For DOCTYPE statements that are not recognized by browsers, the browser uses strict mode to parse
4. In the DOCTYPE declaration, when no DTD declaration is used or a DTD declaration with HTML4 (excluding HTML4) is used, all basic browsers are rendered using quirks mode, others using strict mode parsing.
5. It can be said that, in the existing DOCTYPE statement of the Web page, the vast majority of the use of strict mode to parse.
6. In IE6, if there is an XML declaration (such as:) before the DOCTYPE declaration, it is parsed using quirks mode. This rule has been removed from the IE7.

How to set to Weird mode:

Method one: In the page item section adds

We use Eclipse's HTML template to create a new HTML page that automatically has the above stuff

Method Two: Nothing is added.

Here is a detailed list to refer to: http://hsivonen.iki.fi/doctype/

How to set to Standard mode:

Add any one of the following:

HTML4 offers three types of doctype to choose from:

XHTML1.0 offers three types of doctype to choose from:

(1) Transition type (transitional)

(2) strict type (Strict)

(3) frame type (Frameset)

Here is a detailed list to refer to: http://hsivonen.iki.fi/doctype/

How to determine whether it is a standard mode or a weird mode:

Method One: Execute the following code

alert (window.top.document.compatMode);//backcompat indicates that the quirks mode//css1compat represents the standard mode

Method Two: jquery provides us with the following methods:

Alert ($.boxmodel) alert ($.support.boxmodel)

ie6,7,8 browser's standard mode or weird mode box model differences

(Because Firefox always behaves in a consistent way, we don't worry about it.) So here we focus on IE browser)

-------------------------------------------------modal window----------------------------------------------------

We want to make a div mask, put an IFRAME in the middle and do a dialog tool like the modal window.

Ideas are as follows:

Take out the width and height of the visible area of the page, make a mask,

Implemented by CSS's fixed positioning property {position:fixed}, you can keep HTML elements out of the document stream in a browser location.

When you drag the scrollbar so that the mask does not move, it stays in the center position.

Place an IFRAME in the center to display other pages and submit the form.

You can use the following code to calculate the width and height of the mask:

JS Code

Calculates the aspect of the window and the position of the scroll bar alert (window.top.document.compatMode);//differentiate between odd mode or Standard mode var cw = Window.top.document.compatMode = = " Backcompat "? window.top.document.body.clientwidth:window.top.document.documentelement.clientwidth;//form height var ch = Window.top.document.compatMode = = "Backcompat"? Window.top.document.body.clientHeight: window.top.document.documentelement.clientheight;//form width//must take into account that the text box is at the edge of the page, the control does not display the whole problem var sw = Math.max ( Window.top.document.documentElement.scrollLeft, window.top.document.body.scrollLeft);//horizontal scroll bar position var sh = math.max ( Window.top.document.documentElement.scrollTop, WINDOW.TOP.DOCUMENT.BODY.SCROLLTOP);//vertical scroll bar position//Consider scrolling situation alert ("CW: "+cw+" Ch: "+ch+" SW: "+sw+" sh "+sh);

----------------------------------------------Reference 1-----------------------------------------------------
Let's start by knowing what properties you can use:

ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window scrolltop: Sets or gets the distance between the top of the object and the top of the visible content in the window ScrollWidth: Gets the scrolling width of the object scrollheight: Gets the scroll height of the object. Obj.offsettop refers to the calculation of the upper-side position of obj relative to the layout or the parent coordinate specified by the OffsetParent property, Integer, per pixel. Obj.offsetleft refers to the left position, integer, Unit pixel, of the calculated obj relative to the layout or the parent coordinate specified by the OffsetParent property. Obj.offsetwidth refers to the absolute width of the obj control itself, excluding parts that are not displayed because of overflow, that is, its actual occupied width, integer type, unit pixels. Obj.offsetheight refers to the absolute height of the obj control itself, excluding parts not shown by overflow, that is, its actual height, integer, pixel event.clientx relative to the horizontal coordinates of the document Event.clienty The vertical coordinates of the relative document EVENT.OFFSETX the horizontal coordinate of the relative container event.offsety the vertical coordinate of the relative container clientwidth the width of the content viewable area clientheight The height of the content viewable area ClientTop The vertical coordinate of the content visible area relative to the container clientleft the horizontal coordinates of the content visible area relative to the container

Reference Picture:

----------------------------------------------Reference 2-----------------------------------------------------

JS Code

var width_1=document.body.scrollwidth; Body scroll bar total width var height_1=document.body.scrollheight; Body scroll bar Total high var width_2=document.documentelement.scrollwidth; DocumentElement scroll bar total width var height_2=document.documentelement.scrollheight; DocumentElement scroll bar total width var width_3=document.body.clientwidth; Body page visible area is wide, scroll bar hidden part is not var height_3=document.body.clientheight; Body Web page visible area is high, scroll bar hidden part does not count Var width_4=document.documentelement.clientwidth; DocumentElement Web page Visible area is wide, scroll bar hidden part is not var height_4=document.documentelement.clientheight; DocumentElement Web page Visible Area high, scroll bar hidden part is not counted Var width_5=window.screen.availwidth; Screen available workspace width (not very useful) var height_5=window.screen.availheight;//screen available workspace height var scrollleft_7= Window.top.document.body.scrollleft;//body horizontal scroll bar position var scrolltop_7=window.top.document.body.scrolltop;// Body vertical scrollbar Position var scrollleft_8=window.top.document.documentelement.scrollleft;//documentelement horizontal scroll bar position var ScrollTop _8=window.top.document.documentelement.scrolltop;//documentelement Vertical scrollbar Position alert ("Body scroll bar total width:" +width_1+ ", Body scroll bar Total height: "+height_1+ "\ n documentelement scroll bar total width:" +width_2+ ", documentelement scroll bar total height:" +height_2+ ", \ n" + "\ nthe body page visible area width:" +width_3+ ", Body page Visible Area High: "+height_3+", \ n documentelement Web page visible area width: "+ width_4+", documentelement page visible area High: "+height_4+", \ n "+" \ n Screen Available workspace width: "+width_5+", screen available workspace height: "+height_5+", \ n "+" \ n Body horizontal scrollbar position: "+scrollleft_7+", Body vertical scrollbar Position: "+scrolltop_7+", \ n documentelement Horizontal scrollbar position: "+scrollleft_8+", documentelement vertical scroll bar position: "+scrolltop_8";

(Need to mention: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

The following is from W3school, not very detailed.

Root node
There are two special types of document properties that you can use to access the root node:

Document.documentElementdocument.body

The first property returns the document root node that exists in the XML as well as in the HTML document.

The second property is a special extension of the HTML page, providing direct access to the tag.

Http://www.w3school.com.cn/htmldom/dom_nodes_access.asp

Collect and organize on the internet

Reference:

http://cavonchen.iteye.com/blog/738423

http://hsivonen.iki.fi/doctype/

(go) standard mode and weird mode