由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在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. 剑指Offer-16:合并两个有序链表

    题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 例如A链表为1-3-5-7,B链表为2-4-6-8.所以合并后的新链表C为1-2-3-4-5- ...

  2. web Magic报错 NoSuchMethodError NoSuchMethodError: com.google.common.util.concurrent.SimpleTimeLimiter

    webMagic使用selenium的时候遇到报错: java.lang.NoSuchMethodError: com.google.common.util.concurrent.SimpleTime ...

  3. CF459E Pashmak and Graph (Dag dp)

    传送门 解题思路 \(dag\)上\(dp\),首先要按照边权排序,然后图都不用建直接\(dp\)就行了.注意边权相等的要一起处理,具体来讲就是要开一个辅助数组\(g[i]\),来避免同层转移. 代码 ...

  4. NOI2001 炮兵阵地 洛谷2704

    题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用"P&quo ...

  5. 如何有效管理Windows系统帐户权限

    权限是Windows管理的基础,当然与Windows用户关系最密切,平时接触最多的是与帐户相关的权限.对于Windows帐户权限的管理,你是否完全了解呢?下面,笔者以Winsows XP为例进行相关测 ...

  6. OpenLayers的view与layer：控制显示内容

    view与layer都可以进行显示内容的控制.这两者负责的功能是由区别的. view即显示的地图容器,有以下几个属性: center:[经度,纬度] ,对应的设置函数为view.setCenter() ...

  7. Axios的get和post请求写法

    执行get请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(re ...

  8. 运行 composer update,提示 Allowed memory size of bytes exhausted

    composer update运行之后,提示 PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to ...

  9. 使用log4j实现日志API

    添加SLF4J依赖,用于提供日志API, 使用log4j作为实现 1.pom.xml添加SLF4J依赖 <!-- SLF4J --> <dependency> <grou ...

  10. HDU - 6128

    题意略: 题解:二次剩余板子题 //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pragma GCC optimize(4) //#pra ...