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

浏览器的兼容性表

历史原因:

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式)

————————————————

原文链接:https://blog.csdn.net/qq_43248623/article/details/107835126

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于问题的答案都是找到的比较正确的,仅起到参考作用,关于问题100%面试题... 就这样 1.doctype有什么...
    myfocus阅读 3,604评论 1 1
  • 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(cont...
    潇洒丨阅读 1,796评论 0 0
  • 一、自定义动画 延迟执行start.style.animationDelay = delay + 's'; 二、U...
    LIT乐言阅读 3,688评论 0 2
  • 1.你能描述一下渐进增强和优雅降级之间的不同吗? 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用...
    含含要暴怒阅读 3,535评论 0 3
  • 一、水平滚动条 和 垂直滚动条 1.1 核心技术点1)求滚动条的长度? 2)拖动滚动条,求内容要走多少?滚动条的长...
    码农的世界你不懂阅读 2,994评论 0 0

友情链接更多精彩内容