由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。
　　W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

　　BackCompat 对应quirks mode 

　  CSS1Compat 对应strict mode 

　  BackCompat：标准兼容模式关闭。

　  CSS1Compat：标准兼容模式开启。

　  在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中如何判断当前浏览器正在以何种方式解析？

　　　　

window.top.document.compatMode

　　

　　如何设置为怪异模式：

　　方法一：在页面项部加 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
　　方法二：什么也不加。

　　如何设置为标准模式：

　　加入以下任意一种：HTML4提供了三种DOCTYPE可选择：

　　<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

　　<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

　　<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

　　

浏览器标准模式与怪异模式-CSS1Compat and BackCompat的更多相关文章

  1. HTML文档类型DTD与浏览器怪异模式

    虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

  2. 标准模式 怪异模式 盒模型 doctype

    在页面顶部设置 doctype是为了统一标准 浏览器有标准模式和怪异模式 而这两种模式最大区别就是 盒模型的解析不同 ============================== 图片摘自网络 === ...

  3. 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

  4. JS魔法堂：浏览器模式和文档模式怎么玩？

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

  5. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  6. Doctype作用？标准模式与兼容模式各有什么区别?

    Doctype作用?标准模式与兼容模式各有什么区别? DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面.DOCTYPE不存在 ...

  7. DOCTYPE声明作用？标准模式与兼容模式？

    <!DOCTYPE>文档声明是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明,用以告诉其他人这个文档的类型风格:DTD(文档类型定义)是一组机器可读的规则,它们指示(X) ...

  8. HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式

    主要涉及知识点: HTML与XHTML HTML与XHTML的区别 DOCTYPE与DTD的概念 DTD的分类以及DOCTYPE的声明方式 标准模式(Standard Mode)和兼容模式(Quirc ...

  9. Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

    怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...

随机推荐

  1. 重装系统后配置原有的mysql

    1.重装系统后配置原有的mysql 2.修改 my.ini [修改 basedir:MySQL当前所在路径 datadir  数据存放路径] [mysqld] # 设置3306端口 port= # 设 ...

  2. P1934 封印

    P1934 封印 题目描述 很久以前,魔界大旱,水井全部干涸,温度也越来越高.为了拯救居民,夜叉族国王龙溟希望能打破神魔之井,进入人界“窃取”水灵珠,以修复大地水脉.可是六界之间皆有封印,神魔之井的封 ...

  3. ThinkPHP 的缓存大概多久更新一次

    ThinkPHP 的缓存大概多久更新一次可以自己设置: thinkPHP的缓存默认是文件缓存,保存在Runtime文件夹里面, 如果不设置过期时间,且不清除Runtime文件,就会一直存在. 如果设置 ...

  4. java接口的意义，为什么接口可以多继承，而类不可以？

    原文地址:http://www.cnblogs.com/yunxiblog/p/5240690.html java当中继承一个接口,要重写他的方法的话,那为什么还要多此一举的去实现一个接口呢? 直接把 ...

  5. wrapClass

    参考文章   https://blog.csdn.net/wyk304443164/article/details/68484305

  6. JS数组 谁是团里成员（数组赋值）var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

    谁是团里成员(数组赋值) 数组创建好,接下来我们为数组赋值.我们把数组看似旅游团的大巴车,大巴车里有很多位置,每个位置都有一个号码,顾客要坐在哪个位置呢? 第一步:组个大巴车 第二步:按票对号入座 大 ...

  7. MATLAB 去掉数组里面不要的元素

    trainfinger=1 testingfinger=(1:8); testingfinger = testingfinger(~ismember(testingfinger,trainfinger ...

  8. Mysql 数据库crash恢复

    之前搭建的ghost博客比较坑,修改comment之后重启数据丢了,对node不熟悉,所以就切换回到wordpress了. 回滚快照之后发现数据库crash了,提示如下信息 2016-06-15 23 ...

  9. eclipse变量名自动补全

    对于编程人员来说,要记住大量的类名或类方法的名字,着实不是一件容易的事情.如果要IDE能够自动补全代码,那将为我们编程人员带来很大帮助. eclipse代码里面的代码提示功能默认是关闭的,只有输入“. ...

  10. Django之深入了解视图层

    目录 视图层三板斧 HttpResponse render redirect JsonResponse FBV CBV CBV源码 如何给FBV和CBV加装饰器 视图层三板斧 规定视图函数必须有一个返 ...