从所谓“IE6盒子模型”说起
起因 [TOP]
事情要从6月份锐商企业发的那篇《IE6 很邪恶，但我爱它的盒子模型》[1]说起，这篇文章已经被转了又转（Google的搜索结果相当多，百度倒是挺“干净”的），此文对于盒模型是这么描述的：
“可以看出，IE6 盒子模型中，盒子的尺寸包含了 内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外”
而这个说法是错的，至少在IE6下是相当局限的一种情形。
这是我实验的结果：
从左至右分别是Chrome、Firefox、IE8模拟的怪异模式、IE6、IE8标准模式
并有着正确的XHTML 1.0 Transitional声明
中间蓝色的div我设置了200px的宽10px的padding和border，外加20px的margin，从图可见只有IE8模拟的怪异模式宽度是异常的，IE6好好着呢。
多说一句，你可以从这附图中看到不同的浏览器对于同一个页面显示上的种种差别。
真正的盒模型？ [TOP]
锐商企业的那篇文章写错了也就罢了，在Javaeye上看到的[2]竟然也是这么说的，着实让我这个“初学者”迷茫了一阵子。
大体上我们可以认为浏览器有两种模式：怪异模式（Quirks Mode）和标准模式（Standards Mode）。怪异模式可以说是浏览器保持向后兼容的努力，例如IE6已经修复了盒模型的Bug[8]，怪异模式是其提供向后兼容的手段，主要是为了模拟IE5.5的某些行为[7]。对于现代浏览器，这两种模式之间的差别不大，差别较大的主要是旧版IE。在IE的盒模型尺寸计算上，怪异模式把内填充（padding）和边框（border）计算在内，而标准模式的尺寸是填充内最里层的尺寸。维基的这幅图很清楚：
“The difference in how width is interpreted between the W3C and Internet Explorer box models”
那么合时浏览器由标准模式进入怪异模式呢？
浏览器主要根据页面的Doctype决定该进入何种模式，可见下表，Q代表怪异模式，S代表标准模式，A代表“几乎标准模式”（Almost Standards Mode）：
| Doctype | NS6 | Mozilla0.9.5-1.0 | IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec | IE 7 Opera 7.10 | IE 6 Opera 7.0 | Mac IE 5 | Konq 3.2 | |||
|---|---|---|---|---|---|---|---|---|---|---|
| None | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 3.2 | ||||||||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 4.01 | ||||||||||
| Strict | with system identifier <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S | S | S | A | A | A | A | ||
| without system identifier <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
S | S | S | A | A | Q | A | |||
| Transitional | with system identifier <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
S | S | A | A | A | A | Q | ||
| without system identifier <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Q | Q | Q | Q | Q | Q | Q | |||
| HTML5 | ||||||||||
| <!DOCTYPE html> | Q | S | S | A | A | A | ? | |||
| XHTML Basic | ||||||||||
| with system identifier and without XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> |
S | S | S | A | A | A | A | |||
| XHTML 1.0 | ||||||||||
| Strict | with system identifier and XML declaration <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | A | Q | A | Q | ||
| with system identifier and without an XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | A | A | A | A | |||
| without system identifier and without an XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> |
S | S | S | A | A | S | ? | |||
| Transitional | with system identifier and with XML declaration <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | Q | A | Q | ||
| with system identifier and without an XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | A | A | Q | |||
| without system identifier and without an XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> |
S | S | A | A | A | S | ? | |||
| XHTML 1.1 | ||||||||||
| with system identifier and an XML declaration <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
S | S | S | A | Q | A | Q | |||
| with system identifier and without XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
S | S | S | A | A | A | A | |||
| Doctype | NS6 | Mozilla0.9.5-1.0 | IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec | IE 7 Opera 7.10 | IE 6 Opera 7.0 | Mac IE 5 | Konq 3.2 | |||
各主流浏览器在Quirks Mode和Standards Mode特性上的差别在[3]中有比较清晰的论述。
资料[5]同时指出了四种浏览器模式：Quirks Mode、Standards Mode、Almost Standards Mode、IE7 Mode。
关于盒子模型宽度的问题[9]里说的已经很清楚了，[4]还对box-sizing属性进行了说明。
怪异模式的IE6
有些冤 [TOP]
注：本节涉水，您可以安全略过。
前端方面我是半路出家，个人项目根本就不考虑IE6，可以说对IE6了解很少。锐商这篇文章当初也算第一时间看到的，不看前面盒模型这段，后面写的还行。对于宽度包括外边距这段，当时觉得有些奇怪，要说布局方便的话，宽度不包括外边距（即正确的怪异盒模型）才对啊。之前他们的文章也见了不少，质量并不差，加上对IE6的一贯鄙视（奇怪的bug一堆，也不差这一个了），就确信了。
之后，觉着盒模型这有些不对劲（正确的说法确实看过，但时间实在太久远了），怀疑是否记错了（主要就是包不包含外边距），就重新复习一下宽度，搜到了这篇文章在javaeye上的转载，于是再次踏上贼船。
之后的之后，在前端面试中就悲剧了……盒模型几乎是前端面试的必考题，而且是最基础的内容，经过之前的铺垫，我很自然地“胡言乱语”了。如果我是面试官，当有面试者在如此基础的知识点上胡说八道，我会对他的能力和工作态度打一个大问号。
如果我能注意到原文下面的评论（RSS阅读器看不到评论，怨念啊），如果……如果……能怨谁呢？技艺不精，自食其果吧。不喜欢发牢骚，该话题就此打住。在这里（http://www.seeyou58.com/Html/?39152.html）看到一个跟我有类似遭遇的哥们，我祝他好运。
IE6 [TOP]
如今的IE6如老鼠过街，人人喊打。可是大家看看IE6的发布时间，2001年8月[6]，已经快十年了，在飞速发展的互联网行业，十年意味着什么？而且IE6的目前市场份额对于大多数开发商来说，仍是很难开口拒绝的。
我认为，当初的IE6开发人员完全有理由为自己的杰作而骄傲——因为IE6是互联网时代第一个也将是最后一个可以在长时间无重要功能更新的情况下在10年里均能占有主流地位的前台产品！
IE6能获得如斯的成功，除了机遇和另一款成功的产品——XP的捆绑外，高水准的质量是不可或缺的。其实IE当时对W3C的标准支持是相当不错的，只不过这个世界变化太快。凭借微软的技术优势，IE6让网景成为历史，并维持多年的垄断，2007年末份额依旧在50%以上[7]。IE6实在是太成功了，以致成为今天Web标准推进的一大绊脚石，连微软也摆脱不了。
回到上面的话题，怪异模式其实有一个更好听的名字——兼容模式（Compatibility Mode）。微软主要产品的每次的重大版本升级都会给之前的版本留个后路，IE6为兼容IE5.5的怪异模式、大家熟知的IE8兼容模式，并且微软均给出了如何开启或关闭相关模式的说明，比如加meta标签。
[10]是微软自家对IE1到IE6的历史介绍，在那也可以找到微软其他产品的类似页面，喜欢怀旧的可以去看看
[11]是个很不错的工具，大家可以在上面看到中国的浏览器份额，从IE6的指标来看至少落后全球三年。
浏览器更新方式 [TOP]
主流浏览器Firefox、Chrome、Opera都是处于很频繁的版本更新发布状态而且通常是提醒用户更新或自动更新的，所以大部分开发者基本不用考虑这些浏览器的旧版本。Safari虽然更新较慢，但对标准的实现通常比较领先，所以也很放心。
就剩下IE了，有人认为微软应该向Firefox、Chrome那样频繁更新靠拢，这样才能赶上其他浏览器。最初我比较赞同这一看法，毕竟微软目前的Update技术已经很成熟了，IE的安全补丁事常有，在线安装的体验也不错，从技术角度是完全可以实现的，那功能上为什么时刻保持最新呢？
微软不这么做主要考虑的应该是市场，和Mozilla、Google、Opera免费提供浏览器相比，微软和苹果做浏览器是为了卖操作系统的，给对方系统提供支持也是为了扩大市场而已。
不像Mozilla他们只要考虑稳定版和开发版，微软和苹果要面对多个版本的浏览器共存的情况，并需要提供持续的支持，版本多了首先是难于维护管理。而且他们还要直面最多的用户，旧版本强制废了不行，总升级用户烦，一个版本里界面、功能不能有大的变动……
总之，要赚钱就要面对挑剔的客户，于是限制就多了。另一方面，假如IE10采用自动更新功能了，一天，微软把IE10中的某一错误的显示方式修复了，然后第二天，开发者们发现之前显示正确的页面乱套了，于是他们只得在已经很臃肿的版本检测代码里再加入对IE10.XXX的处理……（这个例子不恰当，示意而已）
M$自然不会让上一幕发生，善待开发者是微软赚钱的秘诀之一。
参考资料
- IE6 很邪恶，但我爱它的盒子模型
- 浏览器的两种模式quirks mode 和strict mode
- CSS - Quirks mode and strict mode | quirksmode.org
- Box model tweaking | quirksmode.org
- Activating Browser Modes with Doctype
- 维基百科 - IE6
- Wikipedia - IE6
- Wikipedia - Quirks Mode
- Wikipedia - Internet Explorer box model bug
- Windows History - Internet Explorer History | Microsoft.com
- http://gs.statcounter.com/#browser_version-CN-monthly-200807-201010
