Browser parsing mode: Detailed explanation of usage of DOCTYPE declaration issues

Webpage production cnn6 article introduction: IE8 has 4 modes: IE5.5 weird mode, IE7 standard mode, IE8 almost standard mode, IE8 standard model.

Trigger standard mode

1. Add DOCTYPE statement, such as:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE html>

2. Set X-UA-Compatible trigger.

Trigger weird mode

1. No doctype statement, define old HTML version (below HTML4, such as 3.2)
2. Add XML statement, can be triggered under ie6
ffeb40d5bcdc5458d8776a6742da47e3
6696bd7d107ee1b4fe3f02d4fff4771a
3. Add HTML between the XML declaration and the DOCTYPE of XHTML Comment, can be triggered under ie7ffeb40d5bcdc5458d8776a6742da47e3
b23583a30551a3f64a1a55213c69c1dd
bfe2946cb5cfdffb9884d7642fb4973e
5, 1ce21ff05b6519698cd23502fbc95a8b placed in front of 1b31082726201d4013407657e8b22f25 or 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag: judge "X-UA-Compatible HTTP Header".

Note 1: If X-UA-Compatible is written under the 2cdf5bf648cf2f33323966d7f58a7f3f or 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, the setting of X-UA-Compatible will be invalid.
Note 2: If the page and server HTTP Header are both set to X-UA-Compatible, use the X-UA-Compatible setting of the page. If the page does not have X-UA-Compatible, the value set by the HTTP Header will be used.
Note 3: The meaning and triggering of almost standard mode are explained in "Almost Standards Mode" below.
Note 4: For the value of IE=xx, ie will try to convert xx to the closest value. For example: IE=7.789 -> IE=7; between 5 and 6 ->IE=5; greater than or equal to 8 ->IE=8.
Note 5: IE=4, IE=3, IE=0.1, IE=-7, which are less than 5, include IE=IE8, IE=IE7, IE=IE6, IE=a, IE=b, IE =bcd, the same as without X-UA-Compatible. It can be understood that X-UA-Compatible is set to an invalid value, so skip here.

2. Set X-UA-Compatible HTTP Header

IE=5, IE=6: Trigger IE5 weird mode (regardless of whether the page has DOCTYPE)
IE=7(70e8397c5461feda0b071dd727b359e07=9) - with doctype- Use almost standards mode (or IE9 standards). Like IE8, rely on doctype to select IE9 almost standard, or IE9 standard mode; no doctype-IE9 standard.
IE=(value<0), IE=IE8, IE=IE7, IE=IE6, IE=a, IE=b, IE=bcd, IE=xxx are unreliable like this, or put X- UA-Compatible meta is written after the 2cdf5bf648cf2f33323966d7f58a7f3f or 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. These situations are the same as without X-UA-Compatible: first determine the "compatibility view", and there is a "compatibility view" setting (doctype -IE7 standard, no doctype-weird mode); "Compatibility View" is not set, there is DOCTYPE-follow doctype, no doctype-weird mode.

Special way of writing X-UA-Compatible

msdn上面提到了X-UA-Compatible值设置成"IE=9; IE=8; IE=5"这样的，意思就是优先最前面的IE9，没IE9就用IE8，没IE8就IE5，并且并不推荐在生产环境下使用。
触发Google Chrome Frame：3435c5972dd88b33da7181f5cc86ec33
可以和IE的X-UA-Compatible混搭：比如：edeeb43dc591905d5529bb5165ba0baa。这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。

几乎标准模式（Almost Standards Mode）

Firefox 1+、Safari、Chrome、Opera(从7.5开始)和IE8/IE9增加了一个"几乎标准模式"，它实现传统的表格单元格的垂直尺寸(没有严格的遵照CSS2规范)。
意思就是，比如下面的代码：

<table style="border:1px solid blue;" cellspacing="0">
< tr><td><img style="border:1px solid red" width="364" height="126" src="http://www.google.com/images/logos/ps_logo2.png"/></td></tr>
< /table>

比如在IE7标准模式下，图片底部和table是没空白的；"几乎标准模式"下，图片底部和table也是没空白的；而较新的浏览器在标准模式下图片底部和table会有个空白。
@see：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

下面的DOCTYPE都可触发IE8标准模式：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE html>

触发IE8几乎标准模式：
c22098bfd3f62d7436149aaab013de1a
3c6ee2e4e556c3badc505155aae90f4f
Mac IE5、IE6/7、Opera(8f6e2fe385d7f17760ce5575dcfc3807)。
任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误，IE9可以在开发人员工具的console里面看到报错。
MacIE5、IE6/7/8不支持application/xhtml+xml。
发现IE9下使用此模式，doctype是无所谓的，1d33348365c3ec55b420fe6254061305 这句命名空间必须的，没设置命名空间css会以文本解析而失效。
同时XML模式下，X-UA-Compatible的设置将会无效。

总结：

X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。

模式、版本不同，不仅仅css解析不同，js的解析也有不同。
了解浏览器解析模式的不同，可以避免我们辛苦写出的标准代码被怪异所残害。
让开发者更注重遵循标准，无论在生产效率还是在协作、沟通上都有好处滴。
现在几乎人人都用标准的doctype来声明文档，所以纠结标准、怪异模式对工作的影响不太大。

The above is the detailed content of Browser parsing mode: Detailed explanation of usage of DOCTYPE declaration issues. For more information, please follow other related articles on the PHP Chinese website!