zoukankan      html  css  js  c++  java
  • document.compatMode的CSS1compat

    document.compatMode

    BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;

    CSS1Compat:标准兼容模式开启。 浏览器宽度:document.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;

     

    在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(严格模式)

    cssfirefly http://cssfirefly.cnblogs.com
  • 相关阅读:
    git commit --amend
    webpack代码分割
    selection And range js
    自动化测试
    python学习路线图
    Java--解决JDK14没有jre问题
    Java-win下环境变量设置
    Jenkins忘记admin密码拯救方法
    Windows或linux下 pip设置默认豆瓣镜像源
    ChromeDriver与Chrome版本对应参照表及ChromeDriver下载链接
  • 原文地址:https://www.cnblogs.com/cssfirefly/p/3641171.html
Copyright © 2011-2022 走看看