【document】document.compatMode的CSS1compat使用介绍-compatMode

复制代码 代码如下:

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;

在Standars mode中：

元素真正的宽度=margin-left + border-left-width + padding-left + width + padding-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

关于document.compatMode的CSS1compat使用介绍的用户互动如下：

　　相关问题：jQuery中使用了document和window哪些属性和方法小结

　　答：document.activeElement 获取文档当前获得焦点的元素 document.head 在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ，可见并非所有浏览器支持 document.body 获得当前文档的HTMLBodyElement元素 document... >>详细

　　相关问题：如何用jQuery做浏览器类型判断和分辨率判断，直接...

　　答：{ return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight;}else{return self.innerHeight;}}; //... >>详细

　　相关问题：使用css+js怎么才能做到这样的效果（见详情）

　　答：这个问题正好前段时间也有研究，JS代码附上： (function(){ $(window).on('scroll',function(){ var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'), top; if($.browser.webkit) $b... >>详细