Introduction to the use of CSS1compat of document.compatMode_javascript skills

document.compatMode

BackCompat: Standard compatibility mode is turned off. Browser width: document.body.clientWidth;

CSS1Compat: Standard compatibility mode is turned on. Browser width: document.documentElement.clientWidth.

Copy code The code is as follows:

var d = document,
　dd = d. documentElement,
db = d.body,
dc = d.compatMode == 'CSS1Compat',
dx = dc ? dd: db;

cWidth = dx.clientWidth;

cHeight = dx.clientHeight;

sWidth = dx.scrollWidth;

sHeight = dx.scrollHeight;

sLeft = dx.scrollLeft;

sTop = dx.scrollTop;

In Standars mode:

Element real width = 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)

How to determine in js how the current browser is parsing?
The document object has an attribute compatMode, which has two values:

BackCompat corresponds to quirks mode
CSS1Compat corresponds to strict mode


Browser compatibility table

http://www.quirksmode.org/compatibility.html

Historical reason:

When the early browsers Netscape 4 and Explorer 4 parsed css, they did not Complying with W3C standards, the parsing method at this time is called quirks mode. However, as W3C standards become more and more important, many browsers begin to parse CSS in accordance with W3C standards and imitate W3C standards in parsing CSS. The mode is called strict mode (strict mode)
firefly