quirks mode(怪异模式) 和 standard mode(标准模式)

最新推荐文章于 2024-02-05 19:35:57 发布

Daisukes

最新推荐文章于 2024-02-05 19:35:57 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： html 浏览器标准

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了DOCTYPE标签的作用及其如何影响浏览器的渲染模式，包括标准模式和怪异模式，并详细阐述了这两种模式下的页面呈现差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现的背景

在很久之前的浏览器，还是Netscape Navigator和 Microsoft Internet Explorer的时候，页面主要就是为这两个浏览器写的。但是到了今天了，firefox、chrome、opera等浏览器的兴起，再加上W3C创建了web标准。本来要是早统一标准，我们就不用为一个浏览器兼容的问题搞得头昏脑涨。但是一些网站还是主要为之前的Netscape和Microsoft浏览器做的，所以如果用我们现在的web标准去要求浏览器厂家实现的话，之前的一些网站就不能用了，所以浏览器就出现可以有两种模式可以切换，实现向后兼容。或者说，浏览器开发商又要对标准化的HTML、CSS支持，又要对之前做的网站也就是非标准的网站实现向后兼容。

如何触发这两种模式

说到这里，我们说说标签的作用，之前对HTML标签还不怎么感冒的，就看了一些W3C的介绍，然后就做了一些可用的界面，觉得HTML好像挺简单似的，入门没什么压力呀。等到现在，越来越认识到HTML作为Web前端的结构，是一个页面的骨架，确实很重要，还有加上了语义化标签，渐渐地对HTML刮目相看。回到正题，我想说的是也是我忽略的一个标签，可能是看了往年大公司面试题的原因吧，觉得它似乎挺重要的。

DOCTYPE标签的使用跟每个属性的作用

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html：表示该文档的跟元素为html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 一个文档类型的公共标识符，是一个xhtml1.0的过渡文档。解析到这里，浏览器就去寻找这个DTD，如果找到了就用这个DTD的要求去渲染你的网页，如果找不到呢？看下面
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 浏览器找不到DTD的话，就去到这个url那里下载DTD并使用。

DOCTYPE标签的作用

跟浏览器说要用那个DTD来解析我的网页
能对界面进行有效性验证
实现怪异和标准模式的切换

我们把重点放在两种模式的切换

[html] view plain copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个将会触发浏览器的标准模式，因为该DOCTYPE标签包括了DTD、URI；还有就是DOCTYPE标签有DTD但是没有URI也会触发浏览器的标准模式
[html] view plain copy
1. <!DOCTYPE html PUBLIC >
这个会触发浏览器的怪异模式，因为该DOCTYPE标签中没有DTD、URI。这里再说明一点就是如果DOTYPE标签没有DTD但是有URI还是会触发怪异模式
[html] view plain copy
1. <?xml version="1.0" encoding="utf-8"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[html] view plain copy
1. 
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
3. "http://www.w3.org/TR/html4/strict.dtd">
这两个都会在IE6中触发怪异模式，因为IE6一定要DOCTYPE为文档的第一个元素才肯触发标准模式
更为具体的各种浏览器DOCTYPE的触发模式的转换，可以看Activating Browser Modes with Doctype

检测当前浏览器使用的模式

我现在只能想到一种方式去检测浏览器的模式，就是用js来实现的，如果在看的您要是有更好的idea的话，请告诉我！其实它浏览器的兼容性还是可以的。

javascript代码：document.compatMode
(1)BackCompat：标准兼容模式关闭;
(2)CSS1Compat：标准兼容模式开启

标准模式下的页面与怪异模式下的页面区别

在height、width应用的元素有区别
[html] view plain copy
1. <span style="height: 40px; width: 200px; background: red;margin:10px">
2. 我是行内元素span，但是我可以在quirks模式下用width、height属性
3. </span>
在IE的 怪异模式下，我们可以看下界面
表现得跟块级元素一模一样呀。
再来看在IE的 标准模式下，界面是什么样子的
区别最大要数盒子模型不一样，对于IE quirk模式下
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
但是在W3C标准下：
box width = content width，
box height = content height，

这样的话，会导致什么情况呢？我们来看下例子先：
[css] view plain copy
1. .div {
2. border: 5px solid blue;
3. height: 60px;
4. width: 200px;
5. }
自己在HTML再添加一个div元素，它的class为div就行了。
在IE quirks model中：

但是在IE8 standard model中：

说明下：图片的盒子模型是在IE的开发者工具中截图出来的，红色框应该表示的是border+padding+content的width、height
元素溢出处理方式不同
在 IE Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。
其实就是说quirks model会自动包含溢出的子元素。