怪异模式（Quirks Mode）对 HTML 页面的影响（2）浏览器如何判断文档类型？
|
- UID
- 1066743
|
怪异模式（Quirks Mode）对 HTML 页面的影响（2）浏览器如何判断文档类型？
浏览器如何判断文档类型？上一节中我们知道 IE 用户可以在 developer tools 中改变文档模式。那么，如果用户没有自己选择，浏览器在准备解析、绘制一个页面的时候，它是如何决定文档模式的呢？实际上浏览器在渲染页面之前会检查两个内容，一个是页面是否有 doctype 信息，另外一个是页面是否有 x-ua-compatible 信息。
Doctype 检测
对于一个 HTML 页面，<!DOCTYP >声明位于其中最前面的位置，处于<html>标签之前，这个<!DOCTYP >可以告知浏览器使用哪种 HTML 规范，针对每种规范浏览器同样也会选择对应的文档模式。平时最常见的三种 doctype 信息对应的文档模式如下。
- 当 doctype 信息如下时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。
<!DOCTYPE html>
- 当 doctype 如下时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 当 doctype 如下时，浏览器会选择 Almost Standards Mode，需要注意的是如果今后需要把这个页面改为 HTML5 规范，那么上文讨论的<table>中的分割图片问题可能会错乱。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 当 doctype 缺失的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式，我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。
x-ua-compatible 信息
除了上一节提到的 doctype 检测，HTML 页面的开发者可以在页面的<head>标签中加入 x-ua-compatible 信息来影响文档类型的判定，具体如下表所示。
表 3 x-ua-compatible 影响文档类型x-ua-compatibledoctypeDocument Mode<meta http-equiv="X-UA-Compatible" content="IE=5" >无影响IE5 quirks<meta http-equiv="X-UA-Compatible" content="IE=7/8/9/10" >无影响IE7/8/9/10 Standards<meta http-equiv="X-UA-Compatible" content="IE=Edge" >无影响IE 最新版本的 Standards<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7/8/9" ><!DOCTYPE html>IE7/8/9 Standards不存在IE5 quirks<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" ><!DOCTYPE html>IE10 Standards不存在IE10 quirks从表 3 可以看出，一般情况下 x-ua-compatible 是优先于 doctype 的设定的，但是当 x-ua-compatible 设定了如“EmulateIExx”的情况时，就会同样考虑到 doctype 的影响。
另外，在<head>中加入 x-ua-compatible 信息与在请求消息的 header 中加入是等同的，如下代码效果是等同的。
response.setHeader("X-UA-Compatible","IE=Edge");<meta http-equiv="X-UA-Compatible" content="IE=Edge" >到现在为止我们分析了 Quirks Mode 产生的历史、对浏览器的影响以及浏览器如何选择文档模式。下一章我们主要讨论两种不同的文档模式下渲染页面的差别。 |
|
|
|
|
|
