document.compatMode的CSS1compat使用介紹_javascript技巧

document.compatMode

BackCompat：標準相容模式關閉。瀏覽器寬度:document.body.clientWidth;

CSS1Compat：標準相容模式開啟。 瀏覽器寬度:document.documentElement.clientWidth。

複製程式碼 程式碼如下:

var d = document,


var d = document,


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

cHeight = dx.clientHeight;

sWidth = dx.scrollWidth;

sHeight = dx.scrollHeight;

sddft 🎜>sTop = dx.scrollTop;



在Standars mode中：

元素真正的寬度= margin-left border-left-width
元素真正的寬度= margin-left border-left-width padding-leftdth pad right border-right-width margin-right;

在Quirks mode中：

width則是元素的實際寬度，內容寬度= width - (margin-left margin-right padding-left padding-right border-left-width border-right-width)

在js中如何判斷目前瀏覽器正在以何種方式解析？
document物件有個屬性compatMode ,它有兩個值：

BackCompat 對應quirks mode
CSS1Compat 對應strict mode


瀏覽器的相容性表
http://www.quirksmode.org/compatibility.html

歷史原因:
當早期的瀏覽器Netscape 4和Explorer 4對css進行解析時，並未遵守W3C標準，這時的解析方式就被我們稱之為quirks mode(怪異模式),但隨著W3C的標準越來越重要，眾多的瀏覽器開始依照W3C標準解析CSS，仿照W3C標準解析CSS的模式我們叫做strict mode(嚴格模式) firefly