compatMode

document.compatMode有两种取值:

  BackCompact:标准兼容模式关闭

  CSS1Compact:标准兼容模式开启

我用IE11的开发者工具简单测试了一下,发现了这么几点

  1,IE7-IE9默认都是CSS1Compat,只有在IE10和IE11,以及Firefox和Chrome中根据是否有DOCTYPE声明判断,有则为CSS1Compact,无则为BackCompact.

  2,document.body.clientHeight和document.documentElement.clientHeight,如果不是特别精细容许十几px就不用太追究,直接用documentElement.

  3,document.body.scrollTop,document.documentElement.scrollLeft&&document.documentElement.scrollTop,document.documentElement.scrollLeft

即使开启标准兼容模式,依然需要在每次用到时检验到底是body还是documentElement.

    一条好习惯就是每个html文档都要有doctype声明,开启标准兼容模式,其他都是用documenElement.

如果精确到px,那就要自己仔细测了!

测试代码:

  var cw1=document.body.clientWidth;
    var cw2=document.documentElement.clientWidth;
    var ch1=document.body.clientHeight;
    var ch2=document.documentElement.clientHeight;
    var sw1=document.body.scrollWidth;
    var sw2=document.documentElement.scrollWidth;
    var sh1=document.body.scrollHeight;
    var sh2=document.documentElement.scrollHeight;
    var st1=document.body.scrollTop;
    var st2=document.documentElement.scrollTop;
    var sl1=document.body.scrollLeft;
    var sl2=document.documentElement.scrollLeft;
    console.log(document.compatMode);
    console.log(cw1+","+cw2);
    console.log(ch1+","+ch2);
    console.log(sw1+","+sw2);
    console.log(sh1+","+sh2);
    console.log(st1+","+st2);
    console.log(sl1+","+sl2);

时间: 2024-08-26 09:20:08

compatMode的相关文章

document.compatMode属性

document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth. 浏览器客户区高度.滚动条高度.滚

关于 document.compatMode

今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode 经过一番资料的查询后,了解到以下信息: 我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 (Quirks Mode),在声明了 !DOCTYPE 时与其他标准浏览器一致,是标准模式 (Standards Mode) document.compatMode 有两个属性值: BackCompat ----- 表示标准规范模式关闭,即当前为混杂模式 (Quirks Mode),此时浏览器客户区

document.compatMode,quirks mode and standards mode

Document.compatMode Indicates whether the document is rendered in Quirks mode or Standards mode. SyntaxEDIT mode = document.compatMode ValuesEDIT "BackCompat" if the document is in quirks mode; "CSS1Compat" if the document is in no-qui

document对象属性documentMode与CompatMode

DOCTYPE DOCTYPE全称Document Type Declaration(文档类型声明,缩写DTD) DTD的声明影响浏览器对于CSS代码及Javascript脚本的解析. 渲染模式 渲染模式分为混杂模式.接近标准模式和标准模式 除了IE6/7不支持接近标准模式,其他模式所有浏览器都支持: DOCYTPE与渲染模式的关系 1.混杂模式:不写DOCTYPE声明: 2.接近标准模式:过渡型(Transitional)或框架型(Frameset)的HTML声明与过渡型或框架型的XHTML声

document.compatMode

document.compatMode  获得文档模式,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别 两种模式: 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth: 当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth. 浏览器客户区高度.滚动条高度.滚动条的Le

javascript document.compatMode属性

文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode.所以为兼容性考虑,我们可能需要获取当前的文档渲染方式. document.compatMode正好派上用场,它有两种可能的

artDialog Error: document.compatMode === "BackCompat 报错原因

今天在使用artDialog的时候报错了提示artDialog Error: document.compatMode === "BackCompat 查了网上说 可以设置<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者把XHTML4.0换成1.0 但

document.compatMode属性和获取鼠标的位置

document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientW

了解document.compatMode属性

这是前端那些事儿看的,我引用过来,方便自己以后翻看,查询 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.