阅读量:0
Quirks模式是一种向后兼容模式，用于支持旧版网页；CSSCompat模式是标准模式，完全遵循CSS规范。
浏览器的渲染模式主要分为Quirks Mode（怪异模式）和CSS Compat（标准模式，也称为Strict Mode），这两种模式反映了浏览器在处理HTML和CSS时的不同策略，理解它们的区别对于开发者确保网页在不同浏览器中的一致性表现至关重要。
Quirks Mode (怪异模式)
Quirks Mode是早期浏览器为了兼容旧版网页而采用的一种渲染方式，这种模式下，浏览器会尝试模仿早期浏览器的行为，尤其是老版本的Internet Explorer，当浏览器检测到一个页面没有DOCTYPE声明或DOCTYPE声明不规范时，通常会启用Quirks Mode。
特点
盒模型差异：在Quirks Mode中，元素的总宽度等于内容宽度加上边框(border)和内边距(padding)，这与标准模式不同，可能导致元素尺寸超出预期。
兼容性：主要用于保持对旧版网页的兼容性，但可能导致新编写的网页在不同浏览器间出现显示不一致的问题。
CSS Compat (标准模式)
CSS Compat或Standards Mode是遵循W3C制定的CSS和HTML规范的渲染模式，在这种模式下，浏览器会根据文档类型定义（DTD）来解析页面，提供更一致的跨浏览器渲染效果。
特点
盒模型：在Standards Mode下，元素的总宽度包含内容(content)、内边距(padding)和边框(border)，外边距(margin)不会影响总宽度，而是会增加元素之间的间距。
规范性：强调使用正确的DOCTYPE声明，以确保页面按照最新的Web标准渲染，从而获得更好的跨浏览器一致性。
渲染模式的选择
浏览器通过识别页面的DOCTYPE声明来决定使用哪种渲染模式，如果页面没有DOCTYPE声明或DOCTYPE声明不规范，浏览器通常会采用Quirks Mode，对于拥有正确DOCTYPE声明的页面，浏览器则采用Standards Mode。
| DOCTYPE声明 | 渲染模式 |
| 无或不规范 | Quirks Mode |
规范（如 | Standards Mode |
FAQs
Q1: 如何在JavaScript中判断当前文档使用的是哪种渲染模式？
A1: 可以通过检查document对象的compatMode属性来判断，如果compatMode的值为"BackCompat"，则表示当前文档处于Quirks Mode；如果值为"CSS1Compat"，则表示处于Standards Mode。
if (document.compatMode == "BackCompat") { // Quirks Mode } else if (document.compatMode == "CSS1Compat") { // Standards Mode }Q2: 为什么老旧的网页在现代浏览器中可能显示不正常？
A2: 老旧的网页可能是根据旧的渲染方法编写的，现代浏览器默认使用Standards Mode来渲染页面，如果这些网页没有正确的DOCTYPE声明，或者使用了不推荐的实践，就可能导致在Standards Mode下显示不正常，为了保持兼容性，可以在HTML文件的开头添加正确的DOCTYPE声明，如<!DOCTYPE html>，以确保页面按预期渲染。
| 特征 | Quirksmode模式 | CSSCompat模式 |
| 描述 | 浏览器模拟早期的渲染模式，以兼容老旧的网页代码，这些代码可能没有遵循W3C标准。 | 浏览器尝试以最高程度的标准化渲染网页，尽量遵循W3C标准。 |
| 兼容性 | 优先考虑与旧版IE浏览器的兼容性，即使这意味着需要牺牲一些CSS的标准化特性。 | 尽量与所有现代浏览器保持一致，使用最新的CSS特性。 |
| CSS渲染 | 可能会使用非标准的CSS属性和值，例如旧的盒模型、布局特性等。 | 尝试使用标准的CSS属性和值，包括所有浏览器都支持的特性。 |
| Box Model | 默认使用IE5的盒模型，即content部分包含padding和border。 | 默认使用W3C标准的盒模型，即content部分不包括padding和border。 |
| 归纳渲染 | 可能会忽略某些CSS归纳布局规则，如bordercollapse。 | 尽量按照W3C标准渲染归纳。 |
| 表单元素 | 可能会使用特定的渲染方式，如checkbox和radio按钮的默认样式。 | 尽量按照标准渲染表单元素。 |
| 表单控件 | 可能会使用非标准的渲染方式，如文本框的宽度。 | 尽量按照标准渲染表单控件。 |
| HTML5元素 | 在某些浏览器中可能不会渲染HTML5元素，如canvas或video。 | 尽量支持HTML5元素，按照标准渲染。 |
| JavaScript | 可能会对某些JavaScript对象和函数的行为进行非标准的处理。 | 尽量按照标准处理JavaScript。 |
| 标准化程度 | 较低，更倾向于旧版浏览器的渲染行为。 | 较高，更倾向于W3C标准的渲染行为。 |
| 应用场景 | 当需要确保旧版IE浏览器正确渲染页面时使用。 | 当需要确保页面在不同浏览器中具有一致性和现代化设计时使用。 |
