你重构过自己的页面吗？——DOCTYPE的魔咒！（上）

前言：如果您知道我有多么辛苦、多么用心的写着这篇文字，出于同情，您或许会捎上一眼。想要将自己的文字发布在园子的首页上，就必须用心去写，上班时白天在公司用着一台实际上只有480MB可用内存的台机，在IE7的窗口中敲打着这篇文字，当我插入了“1.1代码示例”之后，明显感觉所有浏览器窗口就如同当机时一般无法动弹，内存瞬间被吃200MB+，我想是无法继续在IE7下工作了，想把这篇文字迅速编辑完成的梦想顿时破灭了。存稿，关闭IE7，打开Chrome，嗯，还不错，至少内存没被吃太多，编辑器窗口的滚动条还能拖动，我又可以工作了。我的天啊，插入图片，上传按钮失效，老天你不能这样对我，于是，我又切换到Firefox，OK，终于可以插入图片了，却Firefox下，似乎也不是那么顺畅，于是我在几个浏览器之间寻求平衡与协作。周末了，终于我熬了两个通宵，花费了很多本该休息的时间，完成了一个“上篇”，真不知道“下篇”还会耗费我多少不再年轻的“青春”呢？如果您，是一个有点爱心的人，给我点鼓励吧，呵呵。

不知道您是否阅读过 Jeffrey Zeldman 的大作《网站重构——应用Web标准进行设计》（第二版）这本书，即使您没有翻阅过此书，那么您也应该或多或少听说过 W3C 这个词汇吧，当然《网站重构》这本书并非 W3C官方出品，也非官方代言书籍，但是书中所渗透出的思想却是对 W3C 标准和规范的阐释，什么是 Web 标准，如何利用标准进行设计，正是Zeldman在书中用了大量生动的实例所阐述的。

Zeldman 在他的著作中说过：“……许多设计师和开发者都认为 Web 标准只是一个梦想，许多人甚至放弃了正确实现他们的努力。这并不难理解，理解需要多年才能形成。”

在当今这个花花的 Web 世界里，没有一种浏览器是完美的，每种浏览器在使用标准和可访问性上都各有所长。我一直很喜欢IE 在字体上的呈现度上，从我的眼睛看去同样的字体下 IE 总是比其他浏览器更为丰满些，看起来更舒服些，当然这仅仅是我的观点。至于从实现 W3C 标准和规范的角度来说，非 IE 系列的现代浏览器都有着非常良好的表现，当然 IE7+ 也并非一无是处，其对于标准和规范的理解及实现只是稍有欠缺罢了。

说了这么多，我是被《网站重构》鼓动了的心思，可拿什么页面来尝试一下重构乐趣呢？这不，公司首页改版，外包给美工的静态页面交付完工了，某领导最初的设想是让我按照以前其他同事的方式写几个 aspx 页面，然后通过iframe 将这些“动态”显示的数据嵌入到静态的首页中去，我很反感这样做，于是以理抗争说服了领导同志按照我的想法直接将首页改为了 aspx 页面。我的工作终于由分别写几个 aspx 页面，变成了专注于写一个 aspx 页面，貌似轻松不少。一百来行服务器端代码，哗哗啦啦的一个小时不到就写完了，可我花在研究 aspx 页面中 HTML 代码上的时间却不少，如何将动态读取到的数据“安静、不唐突、悄悄的”复原到静态的模板页上，应该采用何种服务器端数据控件动态显示从数据库中读取的数据等。在思考中我浪费了不少时间读取那糟糕的 HTML 源码，Table 布局带给我的视觉冲击就是大量的 <table><tr><td>[……]</td></tr></table> 伴随着数不清的 HTML 标签属性，以及少量使用 style 属性抒写的样式规则。我的天啊，这忽然让我想起了两年前第一次尝试用 Table 布局来组织一个页面时的痛苦，不知道什么地方会千奇百怪多出来的一个像素，整个 Table 或许会无缘无故的膨胀了起来，那些曾经的痛苦都留在记忆。

　　是的，在忍受了 Table 带给我的痛苦不久后，接触了 CSS 这个神奇的家伙，我囫囵吞枣的了解基本规则，对着中国同胞整理的 CSS2.1 手册，开始自己的第一次“DIV之旅”。那时我只是一味的将所有的 Table 全部替换成了“DIV + 绝对定位”，那种对页面上内容的控制欲让我成为了一个十足的“多 div 症”患者。如今回首，那时的我只做了一件事：尝试用 div 重建自己原来的表格结构。用一套不必要（或不合理）的标签替换了另一套不必要（或不合理）的标签。

您或许会觉得我的旁白有点过于啰嗦，如果您不是早已麻木到遗忘地步，那您肯定没有经历过与我类似的痛苦，也没有动手尝试过像一位 divitis 患者一样重构过自己设计过的页面。那就来吧，和我一起经历一次又何妨。

首先，请您来看看根据静态页面按照要求修改而成的 aspx 的页面源码，请您注意 HTML 结构部分我未作任何修改，在您打开折叠的示例代码前，我友善的提醒一下您，做好心理准备，看一眼就可以重新折叠上代码了，因为我怕您“梦回2001”（2001年开始大量使用CSS来表现样式的页面出现，其结构和布局类似于下列代码中所见），但是很感谢您坐在2009年当下的电脑屏幕前认真地阅读我的文字。

　　百克网（这里建议您直接访问我公司首页，看看页面的效果，您或许会发现，嗨，还不错啊，页面设计的很简朴啊，恭喜您使用的是 IE 系列浏览器；如果您看见了什么奇怪异样的页面，那么恭喜您使用的应该是 Chrome 浏览器；如果您发现正在使用的浏览器下页面的表现和 IE 下看起来只有少许异样，那么您或许使用的是 Mozilla 系列浏览器。如果您正在使用非 IE 系列浏览器阅读该篇文字，那么可以通过浏览器点击源码阅读。）首页 aspx 源码如下：

1.1代码示例

　　您如果看过页面的 HTML 源码后，有什么感触，是否有被电到的感觉呢？呵呵，其实网络上充斥着这样的页面代码很多，而且运行良好，维护似乎看起来也很方便，在当今宽带当道的网络世界，小小的一个首页浪费的流量算得了什么，ISP 服务商提供的是不限制流量的服务，大家尽情的访问吧，不会对网站的经营者增加什么额外“超流量”费用。当然在特定环境下，也不大会让自己的顾客因为无法忍受网页显示速度慢(大多数页面打开缓慢的原因还是根源于网速的问题，不是客户的就是服务商的网速)而关闭浏览器窗口。

　　好了，有点耐心，跟着我来一次有点“龌龊”的重构，“龌龊”从何而来，看完整篇文字您或许也会有所体味。

　　下面要展示两幅图片，图片1是公司某位领导构想的新首页布局，在这位领导强硬的态度下，经过几次无谓的修改后，老总终于妥协了，将这张图交付给外包的美工手中，不久就出图并制作好了静态页面。

百克网首页布局
　　　　　　　　　　　　图片1

　　又过了两天，按照领导布置给我的要求经过部分加工，并做些简单的测试，例如每个链接是否有效，在 IE 系列浏览器上是否正常显示布局等，终于如您点击百克网所看到的，也正是下面图片2这样截图所展示的一般：

　　　　　　　　　　　　　　　　图片2

不得不说，从图片2中可以清晰看出美工非常忠实的实现了图片1中的布局，并且沿袭了公司上一个首页版本中的很多元素，依然选择暖色调“橙色”作为主色调，在上海这个甚似冬天的春天里，让人觉得多了一丝暖意。

　　OK，来吧，是该动手的时候了，否则您一定会不耐烦的离开，因为我们似乎离“重构页面”的设想越走越远，上面说了那么多无非是想让您和我一样有“重构”的冲动罢了，不知道是否能如愿呢？

　　请仔细看看图片1吧，抽出最重要的部分，您勾勒出的是一个什么样的布局框架呢？是的，下图就是我从图片1中所抽象出的布局：

图片3

　　对，上图是一个典型的三列布局的框架图（图中尺寸标注有少许错误，1000px应该改为1002px，周一会上传更正后的新图片），重构就从这里开始吧，从实现一个简单的三列布局开始。

　　其实，早在拿到图片1时，我就私下开始尝试自己的“实现”，只可惜自己的平面设计能力停滞在10年前大学生活的那段历史里，我只能想着如何忠实还原图片1中的一切，于是在显示器的实际分辨率为 1024*786 的情况下按照 800*600 的分辨率情况开始了布局设计，其 HTML 结构如下：

800*600分辨率下三列布局HTML代码示例

HTML 代码中外部导入的样式表 indexStyle.css 的源码如下：

三列布局的样式表示例

　　
好的，非常好，我从 Andy Budd 那里学到的三列布局技巧终于派上了用场，我迫不及待的在 IE7+、Chrome1.0、Firefox3.0+、Opera9.5+、Navigator9.0+等现代浏览器上测试了一番，结果如预期一般，在非 IE 浏览器中我获得了几乎一直的三列布局效果，结果就是非 IE 浏览器们很好的解析了我编写的 CSS，页面上看起来丝毫不差可谓相当满意。这不，唯独在 IE7 下，页面看起来稍微有点别扭，不，是残缺，您来和我一起看看 IE7 如何表现的吧！截图如下：

　　　　　　　　　　　　　　　　　　　　　　　　图片4

　　如果您只是一名 HTML 和 CSS 方面的新手，不怕麻烦，建议您花上少许的时间，把示例中的 HTML 代码和CSS 代码分别拷贝到记事本中，然后分别将拷贝了 HTML 代码的记事本文件改名为 index.html，将拷贝了 CSS 代码的记事本文件更名为 indexStyle.css，并将更名后的两个文件放置于同一个文件夹内，其后您可以通过点击 index.html 文件，就可以看到如图片4中一般的画面了（如果是以 IE7 为默认浏览器的话）。如果您是一名熟练的老手了，是否已看出问题所在了呢？

　　来吧，看看我当时遇见问题时的简单分析，还原我最初的思考，希望您不曾遇见过如此讨厌的情景。

　　当您无法改变自己身处的环境时候，您就得去适应它，而我，就是那个必须去适应自己所处环境的人之一。公司网站的开发基于.NET 1.1，使用的 IDE 理所当然的就是 VS2003 了，而这却埋下了图片4中奇怪现象的种子。我曾经习惯在不去关注 aspx 页面中的 DOCTYPE，在没有进入目前的这家公司之前我使用的 IDE 是 VS2005，其 aspx 页面的 DOCTYPE 都是 XHTML，那是一种无论如何都能和 Web 标准攀上亲戚的 DOCTYPE，是具有良好的标准特性的文档类型，当然能以一种符合标准的模式来解析页面上 HTML 的结构和 CSS 所表现的样式。如果不幸的是由于VS2003自动生成的 aspx 页面中的 DOCTYPE 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。按照 Web 标准的 CSS2.1 对页面进行三列布局，无论如何都无法做到在 IE7+ 下与 Chrome、Firefox3.0+ 和 Opera9.5+等现代浏览器下获得几乎一致的表现结果，这其中究竟又是如何呢？

　　Chrome 与 Firefox3.0+ 等浏览器所获得布局结果表现几乎一致，能够完美的按照设想的表现来布局，可在 IE7 下，总是表现很怪异，从图片4中，细心的您是可以找出 IE7 下布局表现的结果与其它非 IE 浏览器不一样的地方，您是否发现 sideContent 这块区域的左边框线消失在了屏幕上，而且 secondaryContent 整块块区域通过目测应该向左偏移了3px以上的距离。这一切都根源于当前的 IE7 在解析盒模型时，对设置了“空白边 ”(margin)的“块级元素”（div）并没有将div的边框宽度计算在其 width 和 height 之中，而在 Chrome 与 Firefox3.0 等浏览器下，按照标准的盒模型解析时候，设置了 margin 的 div 元素的边框宽度均计算在内了。

　　想了很多办法，甚至想过是否能够找到某些 HACK 方法，在创建一个 id 选择器所对应的样式时，让 IE7 解析到专门为其设置好的margin值，然后紧跟其后是一条让 IE7 无法解读的属性规则（该规则是符合CSS标准的），这样IE7就不再继续阅读之后定义属性规则，从而做到能够按照我设想的那样在 IE7 上进行布局。同事，在那一条 IE7 无法解读的属性规则下，我再设置一个 margin 值，当在Chrome 和 firefox3.0 等对 Web 标准实现更完美的浏览器下，能够顺利阅读那条“无法解读的属性规则”的话，就会将后一个 margin 值覆盖前一个专为 IE7 设置的 margin 值。

很可惜，上面这一切，我并没有实现，我的尝试失败了，因为 IE7 不是 IE6/IE5.x，她能够识别很多她的前辈们无法阅读的规则属性。我甚至想过，利用 IE浏览器专有的“有条件注释”，为 IE7+ 浏览器写一个专有的样式表，然后通过下列规则导入样式表: 。可这是解决问题的最终之道吗？招数、专有，这些打上标签的名词是在我们“走投无路”时才会想起的救命稻草，可此时我还没有走到山穷水尽的地步，不是吗？为什么只会在 IE7+ 下表现如此怪异，而在 IE6/IE5.x 下布局完全变得的支离破碎呢，却又在非 IE 浏览器下完美之至呢？

既然 IE7 下表现是那么怪异，加上上面那些分析，其解析盒模型的方式如此接近 IE6/IE5.x又不完全是，我忽然想到了一词，一个非常贴切用于形容此刻浏览器所表现出来的状态的词汇——怪异模式（quirks mode）。OK，就是它在作弄我们，忽然想起曾经在 Andy Budd 的大作中学习过 DOCTYPE 声明的另一个重要作用，就是切换浏览器的表现模式，一般来说浏览器都存在两种表现模式：标准模式和怪异模式（quirks mode）。顾名思义，在标准模式中，浏览器根据 Web 标准的规范表现页面；在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器的行为，最显著的例子当然就是 Windows 上 IE 专有的盒模型。在 IE6 中，在标准模式中使用正确的盒模型，在怪异模式中使用老式的专有盒模型。

为验证上面的概述是否也适合 IE7 浏览器呢，三列布局中所呈现的怪异结果，是否因为 IE7 浏览器的怪异模式下工作所致呢？于是乎，我迫不及待的将 aspx 页面中的DOCTYPE声明简单的修改HTML 4.01 Transitional + URI的形式，即：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，您猜怎么着，果不其然，IE7 下怪异的布局消失了，其展现出的结果与Firefox、Chrome等现代浏览器一致完美，看来问题的根结就起源于浏览器的怪异模式。

那么，如何判断浏览器会采用那种模式工作，一个大致的原则如下：如果 XHTML 文档包含形式完整的DOCTYPE，那么一般以标准模式表现。对于 HTML4.01 文档，包含严格 DTD 的 DOCTYPE 常常也会导致页面以标准模式表现。包含过度 DTD 和URI 的 DOCTYPE 也导致页面以标准模式表现，但是有过度 DTD 而没有 URI 会导致页面以怪异模式表现（正是我所展示的aspx 页面最初的状态，缺少URI）。DOCTYPE 不存在或形式不正确也会导致 HTML 和 XHTML 文档以怪异模式表现。

在这方面的深入研究，CSS 大师 Eric Meyer 制作的一张图表，这张图表中说明不同的浏览器如何根据 DOCTYPE 声明选择表示方式的。如果您觉得去研究这种图片很麻烦，也不大原因去记忆我上面给出的那些通用准则的话，在这我可以教您一个最简单的办法，来观察您的浏览器当前处于何种模式下工作。实施这个方法的前提是，您必须安装一款 Firefox 系列的浏览器（最好为简体中文），然后将鼠标放在您浏览的当前页面上，点击鼠标右键——查看页面信息——渲染模式。对了，我们要找的就是这个渲染模式，如果您看见其后写着“混杂模式”，那就是表示当前浏览器处在“quirks mode”了。

在了解我设计中遇见的“怪异”问题后，请大家切记：无论是否编写了有效且符合标准的CSS，如果您选择了错误的DOCTYPE，那么页面就有可能以怪异模式表现，其表现就可能会有错误或不可预测存在。当然，这些不可预测会像折磨我一样折磨这你，不是吗？

写到这里，我的上篇就此告一段落了，编辑、排版、插图实在很辛苦，一个非常简单的问题，往往会折腾了大半天。当然，如果您看到这里，真诚的感谢您，陪着我一起受累了，如果您对我所描述的这些文字有那么一点点感兴趣，同时我所描述的内容能给您带来一点点受益，我就很满足了。

当然，真正的重构才刚刚开始，如果您有兴趣，那么就尽请期待我的下篇吧，谢谢您的光临！

　　　　　　　　　　　　　　　　　　 rainnoless 2009.03.09 5:28

posted on 2009-03-13 22:38 rainnoless 阅读(5168) 评论(56) 编辑收藏举报