浏览器标准模式与怪异模式-CSS1Compat and BackCompat

MoeCodeFree

于 2021-09-01 21:35:26 发布

阅读量369

点赞数

分类专栏： HTML 文章标签： html5 html css

原文链接：https://www.cnblogs.com/webcabana/p/7277359.html

版权

HTML 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

浏览器标准模式与怪异模式-CSS1Compat and BackCompat

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSS1compat或称为Strict mode也有叫做Standards mode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quirks mode和Standards mode，两种渲染方法共存在一个浏览器上。

BackCompat 对应quirks mode

CSS1Compat 对应strict mode

BackCompat：标准兼容模式关闭。

CSS1Compat：标准兼容模式开启。
　
在Standards 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中如何判断当前浏览器正在以何种方式解析？

window.top.document.compatMode

如何设置为怪异模式：

将<!DOCTYPE html>注释掉

<!-- <!DOCTYPE html> -->

MoeCodeFree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器标准模式与怪异模式-CSS1Compat and BackCompat

浏览器标准模式与怪异模式-CSS1Compat and BackCompat由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSS1compat或称为Strict mode也有叫做Standards mode)，这就是二者最简单的区别。W3C标准推出以后，浏览器都
复制链接

扫一扫

专栏目录