This post describes how IE8 determines what Document Mode such as Quirks or Standards Modes to use for rendering websites. This topic is important for site developers and consumers.
It’s related to the Compatibility View List that we recently updated . This list is down by over 1000 websites, from over 3100 to just over 2000, since IE8 released last March. As we work with site developers and standards bodies, we’re excited to see the sites that need to be on the Compatibility View (CV) List continue to go down.
Data-driven Design
Before we dig in to the design details, I want to share some of the data we use to design the compatibility experience.
When looking at the doctype and X-UA-Compatible meta tag and header on thousands of high traffic websites worldwide such as qq.com, netlog.com and those on the initial CV List ,
- 26% specify Quirks such as amazon.com, tworld.co.kr, and unibanco.com.br.
- 41% specify a Transitional doctype that puts them in Almost Standards Mode .
- 14% have already added an X-UA-Compatible meta tag or HTTP response header to render in IE7 Standards Mode.
Here’s why this makes sense; many high traffic websites want to render in as many browsers as possible, which is why they write for Quirks. Many websites have pages written specifically for IE7 and many web authoring tools such as Aptana Studio and Expression Web specify the Transitional doctype by default:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Thinking in terms of web-scale, there are billions of pages written specifically for either Quirks, IE7, Almost Standards, or the latest Standards. IE needs to support all of these web platform variations to ensure that our broad, world-wide, user-base has the best experience.
With this data in hand, we designed IE8 with a few principles in mind:
- Render websites in the most standards compliant way by default.
As stated in previous posts , we’re committed to interoperability, which means rendering websites in the most standards compliant way possible by default.
- Users expect the web to just work in IE.
A small set of users will tinker to get websites that expect and work best in IE7 Standards Mode to work in IE8’s more standards-compliant default mode. For everyone else, IE8 includes Compatibility View Settings .
The best experience here is one that works automatically as the web developer intended. This is why we created the Compatibility View List . It’s also important to give users the ability to fix websites that aren’t on the list yet through the Compatibility View button.
- Web developers are in control of how their content renders.
The X-UA-Compatible meta tag and header override IE and user settings. They also provide web developers with fine-grain control over how each webpage renders in IE.
For example, some websites have pages written for Quirks and others for IE7 Standards. When IE receives an X-UA-Compatible header with an EmulateIE7 value from servers, it renders each page in the appropriate Quirks or IE7 Standards Mode.
- Give web developers tools and time to help transition their content to IE8 Standards.
IE8 introduced the X-UA-Compatible meta tag and header to provide web developers time to transition their websites to IE8 Standards. As mentioned above, many websites have already used this mechanism to specify that their content should run in IE7 Standards Mode.
A Diagram on How IE8 Determines Document Mode
Given the above principles, there are four rules that you can remember about how IE handles doctype, X-UA-Compatible meta tag and header, Developer Tools, and Compatibility View Settings. These rules follow the diagram below from top to bottom:
- The Developer Tools settings override all Document Modes for pages displayed in a tab.
- The X-UA-Compatible meta tag and then header override Compatibility View Settings and the doctype unless the X-UA-Compatible value is EmulateIE7 or EmulateIE8.
- The user’s Compatibility View Settings override the Microsoft Microsoft Compatibility View List .
- If none of the above rules apply, the doctype determines whether the webpage renders in IE8 Standards, IE8 Almost Standards or Quirks Mode.
Compatibility and interoperability are complex. To reduce complexity for developers and users alike, we would love to see websites transition from legacy browser modes. We respect that the choice of mode is up to the site developer. We’re excited to work with sites and standards bodies to continue improving IE’s implementation of interoperable standards.
Many thanks to Jesse Mohrland for verifying the diagram.
Marc Silbey
Program Manager
doctype声明、浏览器的标准、怪异等模式
群里看到一个面试题，doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks Mode),如何触发，区分他们有何意义？
而且据说是笔试题，汗。
现在对做题比较感兴趣，so整理份答案（不保证满分。而且如果我做笔试题，每天打字，很多汉字都写不出了，只能让考官看拼音了。。虽然能答出个一二，但肯定没此文详细了）：
触发标准模式
1、加DOCTYPE声明,比如：
<!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、设置X-UA-Compatible触发。
触发怪异模式
1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 <?xml version="1.0" encoding="utf-8"?>
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
IE8有4种模式：IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式
1、设置X-UA-Compatible meta
IE=5、IE=6(介于5、6之间的任意数字，比如5.987654321)：触发IE5怪异模式(无论页面是否有DOCTYPE)
IE=7(7<= 值 <8)：强制IE7标准(无论页面是否有DOCTYPE)
IE=EmulateIE7：遵循DOCTYPE(有DOCTYPE-IE7标准；无DOCTYPE-IE5怪异模式)
IE=EmulateIE8：遵循DOCTYPE(DOCTYPE-IE8几乎标准模式(或IE8标准模式)；无DOCTYPE-IE5怪异模式)
@see: http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx
IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的)：有doctype-使用几乎标准模式，或IE8标准；无doctype-IE8标准。
无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、把X-UA-Compatible写在<link>或<script>标签后：判断"X-UA-Compatible HTTP Header"。
注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 -> IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7 这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。 可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。
IE X-UA-Compatible的一些说明：http://expression.microsoft.com/en-us/dd835379
IE=5、IE=6: 触发IE5怪异模式(无论页面是否有DOCTYPE)
IE=7(7<= 值 <8): 强制IE7标准(无论页面是否有DOCTYPE)
IE=EmulateIE7: 遵循DOCTYPE(有DOCTYPE-IE7标准；无DOCTYPE-IE5怪异模式)
IE=EmulateIE8：遵循DOCTYPE(DOCTYPE-IE8几乎标准，或IE8标准；无DOCTYPE-IE5怪异模式)
IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的)：有doctype-使用几乎标准模式(或IE8标准)；无doctype-IE8标准。
注：设置了X-UA-Compatible(meta或http header)后，会覆盖客户端的兼容性视图设置。会强迫(优先)使用X-UA-Compatible设置的模式
无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、还有上面注5里面提到的：首先判断"兼容性视图"，有"兼容性视图"的设置 (doctype-IE7标准，无doctype-IE5怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype- IE5怪异模式。
IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式、IE9几乎标准模式、IE9标准模式、XML模式
IE9和IE8大体上差不多：
X-UA-Compatible
IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) - 强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA- Compatible meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性 视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循 doctype，无doctype-怪异模式。
X-UA-Compatible的特殊写法
msdn上面提到了X-UA-Compatible值设置成"IE=9; IE=8; IE=5"这样的，意思就是优先最前面的IE9，没IE9就用IE8，没IE8就IE5，并且并不推荐在生产环境下使用。
触发Google Chrome Frame：<meta http-equiv="X-UA-Compatible" content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。这样写的好处：可以让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.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!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几乎标准模式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Mac IE5、IE6/7、Opera(<7.5)和Konqueror无几乎标准模式(它们没有严格遵循CSS2规范，实际上，它们的标准模式更接近几乎标准模式)。HTML5把这种模式叫“受限怪异模式(limited quirks mode)”。
IE、op、ff下几乎标准模式的相关文章：
http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
http://www.opera.com/docs/specs/doctype/
https://developer.mozilla.org/en/Mozilla's_DOCTYPE_sniffing
XML模式 - application/xhtml+xml Content
Firefox、Safari、Chrome和Opera中，HTTP头设置了MIME-type(Content-Type为 application/xhtml+xml时)，会触发XML模式。在XML模式中，浏览器会严格地以XML解析XHTML文档(很严格，用过W3C的 xhtml验证的同学应该明白,比如"&"要用"&"+"amp;"、<br>要用 <br />)。
任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误，IE9可以在开发人员工具的console里面看到报错。
MacIE5、IE6/7/8不支持application/xhtml+xml。
发现IE9下使用此模式，doctype是无所谓的，<html xmlns="http://www.w3.org/1999/xhtml"> 这句命名空间必须的，没设置命名空间css会以文本解析而失效。
同时XML模式下，X-UA-Compatible的设置将会无效。
@see: http://www.w3.org/TR/html5/namespaces.html
参考：
http://hsivonen.iki.fi/doctype/#handling秦歌的译文：http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/
总结：
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来声明文档，所以纠结标准、怪异模式对工作的影响不太大。
Henri Sivonen文章里有2处我测试有误：
1、IE=8 或 IE=Edge 或 IE=99 或 IE=9.9：进入“几乎标准模式”
2、IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有或首先出现 script：进入”X-UA-Compatible HTTP头”
不同之处，我上面已经说的比较详细了。
以上说的东西全部经过本人亲测，win7 sp1 en 下的ie8，测试完毕装的IE9，都是原版。
想自己测试结果的同学可以，使用我之前写的用css检测浏览器的文章：http://www.fantxi.com/blog/archives /browser_detector/ 来做测试，先装win8在装IE9，然后http头部分用程序或配置服务器来设置。代码修修改改，测了我一晚上。。
推荐看看秦歌的译文，涉及了更多的知识，写的更全面。我这里只针对IE8/IE9的渲染模式做了个测试。
2032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
