浏览器渲染模式：Quirksmode与Standardsmode解析

需积分: 9 41 浏览量更新于2024-09-11 收藏 17KB DOCX 举报

身份认证购VIP最低享 7 折!

30元优惠券

"浏览器Quirksmode(怪异模式)与CSS1compat" 浏览器Quirksmode（怪异模式）和CSS1compat（兼容模式）是网页渲染的两种主要方式，它们反映了浏览器处理HTML和CSS时的历史遗留问题与标准化进程。在W3C标准出现之前，各浏览器厂商对页面布局和样式有着不同的实现方式，导致了渲染的不一致性。Quirksmode主要是为了保持对旧版网页的兼容性，而Standardsmode则是遵循W3C制定的CSS和HTML规范，提供更一致的跨浏览器渲染效果。 Quirksmode（怪异模式）： - 在早期，由于缺乏统一的网页标准，浏览器开发者各自实现自己的渲染引擎，导致页面在不同浏览器下表现各异。 - 当浏览器检测到一个没有DOCTYPE声明的页面时，它通常会默认启用Quirksmode，以模仿老版本的IE浏览器（尤其是IE5）的行为，以确保这些旧网页能正确显示。 - 在Quirksmode下，浏览器可能会忽略一些CSS标准，比如盒模型（Box Model）的处理方式，导致元素宽度和高度计算与现代标准模式不同。 CSS1compat（兼容模式）或Standardsmode（标准模式）： - W3C推出CSS1和后续的HTML4、XHTML1等标准后，浏览器开始支持标准模式，以提供符合规范的渲染行为。 - 在标准模式下，浏览器遵循W3C的盒模型，其中元素的总宽度等于content宽度加上padding宽度加上border宽度，再加上海量外边距。 - 标准模式强调文档类型DTD（Document Type Definition）的使用，DOCTYPE声明会告诉浏览器应该按照哪个标准来解析页面。 - 有DOCTYPE声明的页面，浏览器通常会根据声明选择标准模式。例如，HTML5的DOCTYPE `<!DOCTYPE html>` 就会触发标准模式。 DOCTYPE与渲染模式的关联： - 不同DOCTYPE会导致不同的渲染模式。例如，HTML4的 Transitional DTD（如 `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`）通常会触发Standardsmode，而HTML4 Strict DTD（如 `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`）同样如此。 - 部分浏览器对未知的DOCTYPE或HTML4以下的DTD会启用Standardsmode，而某些特定情况（如IE6中的XML声明前置）可能导致页面进入Quirksmode。盒模型差异： - Quirksmode中，元素的总宽度等于content宽度加上border和padding，这与标准模式不同，可能导致元素尺寸超出预期。 - 在Standardsmode下，元素的总宽度包含content、padding和border，外边距不会影响总宽度，而是会增加元素之间的间距。总结来说，Quirksmode和Standardsmode是浏览器为了兼容旧网页和遵循现代标准的两种渲染策略。开发人员应尽量避免依赖Quirksmode，使用正确的DOCTYPE声明确保页面在标准模式下正确渲染，从而获得更好的跨浏览器一致性。

资源详情

资源推荐

浏览器 Quirksmode(怪异模式)与 CSS1compat

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一

浏览器在不同版本中，对页面的渲染也不同。在 W3C 标准出台以前，

浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode 或

者称为 Compatibility Mode)；由于 W3C 标准的推出，浏览器渲染页面

有了统一的标准(CSScompat 或称为 Strict mode 也有叫做 Standars

mode)，这就是二者最简单的区别。

W3C 标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是

如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根

据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常

为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都

保留了旧的渲染方法（如：微软的 IE）。这样浏览器渲染上就产生了

Quircks mode 和 Standars mode，两种渲染方法共存在一个浏览器上。

那么浏览器究竟该采用哪种模式渲染呢？这就引出的 DTD，既是网页

的头部声明，浏览器会通过识别 DTD 而采用相对应的渲染模式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有 doctype 声

明的，所以浏览器对没有 doctype 声明的网页采用 quirks mode 解析。

2. 对于拥有 doctype 声明的网页，什么浏览器采用何种模式解析，这

里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

下载后可阅读完整内容，剩余3页未读，立即下载

猪会飞1429

粉丝: 0
资源: 2

浏览器渲染模式：Quirksmode与Standardsmode解析

完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

quirks:怪癖模式标准

选择正确DOCTYPE解决CSS在网页失效问题

怪异模式（Quirks Mode）对 HTML 页面的影响

page layout may be unexpected due to quirks mode

<!DOCTYPE html><html><head> <title>控制灯</title></head><body>

控制灯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 这个声明如果不写在JSP页面中，有什么影响吗？

怪异盒模型和标准盒模型

element html must be declared

edid_get_quirks

api-ms-win-quirks 64位

ModuleNotFoundError: No module named 'Quirks'怎么解决

api-ms-win-core-quirks-|1-1-0.dll

api-ms-win-core-quirks-l1-1-0

EXT-MS-WIN-KERNEL32-QUIRKS-L1-1-0.DLL缺啥依赖

<meta http-equiv="X-UA-Compatible" content="ie=edge">

什么是盒模型，及怪异盒模型的两个的区别？

usbhid驱动会匹配哪些设备，如何在usbhid驱动过滤掉特定的设备

最新资源