DOCTYPE
总述
1. 三种渲染模式:怪异模式(Quirks Mode)、接近标准(Almost Standards Mode)和完全标准(Standards Mode)
2. 浏览器用doctype sniffing(doctype)来确定引擎模式。<!DOCTYPE html>放在文档最开始,防止浏览器用怪异模式进行渲染
早期的网页一般有两个版本:针对Netscape和ie。当W3C标准制定后,浏览器并不能完全实现。因此,浏览器厂商引进了两种模式来处理新标准。目前,浏览器引擎有三种模式:怪异模式(Quirks Mode)、接近标准(Almost Standards Mode)和完全标准(Standards Mode)。在怪异模式中,布局是模拟Navigator4和ie5的非标准行为,以支持早期的网页。而完全标准模式是希望像html和css规范一样的行为。在接近标准的模式中,有少量是按照怪异模式实现的。
HTML5 <!DOCTYPE html>
<!DOCTYPE html>是由HTML5推荐的最简单的方式,来保证浏览器使用完全标准模式进行渲染网页。目前 所有浏览器将该声明处理为完全标准模式,即使是ie6
<!DOCTYPE html>置于所有文档开头,用来防止浏览器在渲染一个文档时使用quirks mode,通过该声明保证浏览器尽可能地符合规范,而不是用兼容的方式来渲染
在HTML5中,DOCTYPE唯一目的是用来激活完全标准模式。老的HTML标准可能会给DOCTYPE其它意义
SGML是一个传统的标签框架。在HTML4.0.1中,文档类型声明是用来说明 html版本信息。但它并不是一个区分SGML或XML文档的好方法。HTML4.0.1或ISO 8879(SGML)都没有提及将文档类型声明作为引擎模式的开关。由于大多数的quirky文档没有文档类型声明或者它们需要引用一个DTD,所以,HTML5把text/html中的文档类型声明只作为模式开关
不同模式的影响点
- 布局
除了ie,对于text/html这些模式主要影响css布局和格式系统。比如在tables中不继承样式,盒子模型转换为ie5.5盒模式
- 语法分析
quirks mode和standars mode主要是针对css布局和css语法分析,而不是html
xhtml作为text/html时也是由与html相同的解析器进行语法分析。对浏览器而主,xhtml只是对标签有一些增删。只有用xml文档类型(application/xhtml+xml或application/xml)会触发xml模式,它是用于html完全不同的分析器
- 脚本
比如在firefox14前,html id属性在标准模式中并不能在全局中访问。在firefox中,document.all可以使用。
选择一个doctype
-
standards mode:<!DOCTYPE html>
-
Standards mode, legacy validation target:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
Almost Standards mode,use sliced images in table layouts:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
Quirks mode: no doctype
IE X-UA-Compatible
如果在HTTP头或meta标签中没有用X-UA-Compatible,IE8和IE9会让页面从标准模式变成IE模式,该模式是兼容视图。另外,Microsoft可能把整个域名列为黑名单(如mit.edu),那么它也会以兼容模式呈现
问题:网页在IEx中正常,但在IEy中混乱( y > x)
解决:
在HTTP头部添加X-UA-Compatible: IE=IEx或者添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIEx">(在所有script前)
修改网页使不现依赖非标准的IEx行为
Google Chrome Frame是针对IE的浏览器扩展和插件的组合,它会将chrome的引擎添加到IE的用户接口shell中。<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">:在IE8及以下触发Chrome Frame
参考
如何触发不同的doctype:https://hsivonen.fi/doctype/
mdn: https://developer.mozilla.org/en-US/docs/Glossary/Doctype