Introduction to using CSS1compat in document.compatMode

  • 2020-03-30 02:31:26
  • OfStack

Document.com patMode

BackCompat: standard compatibility mode off. Browser width: the document body. ClientWidth;

CSS1Compat: standard compatibility mode enabled. The browser width: the document. The documentElement. ClientWidth.
 
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:

True 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 do you determine in js how the current browser is being parsed?
The document object has a property called 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 reasons:

When early browser Netscape 4 and Explorer 4 to parsing, CSS does not comply with the W3C standard, then the analytic way is what we call quirks mode (quirks mode), however, as the W3C standard more and more important, many browsers start according to the W3C standard parsing CSS, modelled on the W3C standard parse the CSS model called our strict mode (strict mode)
are

Related articles: