没有<!DOCTYPE>标记时浏览器将工作在各自私有的“混杂模式”下。
删除<!DOCTYPE>是灾难的开始。
----题记
很多Web前端设计者都会遇到页面的浏览器兼容问题。一个网页在IE下显示正常，在Firefox里却不正常。或者在Opera里正常，在Chrome里却遇到了问题……
而大部分人解决这些问题的方法只有一个，就是针对不同的浏览器写不同的CSS规则。他们充分利用每个浏览器独有的特性：独有的CSS语法、滤镜、盒模型……他们做完IE兼容，就马不停蹄的去做Firefox兼容，接着是Opera兼容、Chrome兼容……
而这些忙忙碌碌的人，他们往往都有这样一个习惯：从来不写<!DOCTYPE>标签，甚至看<!DOCTYPE>不顺眼，觉得它既占地方又没什么用，见到html编辑器自动产生了<!DOCTYPE>还会动手删除。殊不知，他们之所以要如此辛苦的做各种浏览器兼容工作，就是这个“微不足道”的习惯害的。
<!DOCTYPE>标签的样子（以下是XHTML MP(WAP2.0网页)的DOCTYPE标签内容）：
<!DOCTYPE html PUBLIC"-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "
http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
也许WAP网页的设计者是最幸福的一群人，因为他们在一开始就被强制要求写<!DOCTYPE>标记，因为<!DOCTYPE>是WML和XHTML MP中不可缺少的一部分，少了的话部分浏览器会报错，因此没有人会去删除WAP网页中的<!DOCTYPE>标记。所以当我们在不同的电脑浏览器上查看某些很复杂的XHTML MP(WAP2.0)页面时，某些被浏览器兼容问题困扰的WEB设计师会惊讶的发现：这些网页即使没做任何特别的浏览器兼容处理，但在不同的浏览器中显示效果却一模一样！！！
为什么WAP2.0网页能如此，自己写下的WEB2.0网页却要承受各种浏览器兼容问题的煎熬呢？这些设计师困惑了。于是，他们中的一些人开始寻找原因。他们打开了这个网页的源代码，首先映入眼帘的就是一个大大的<!DOCTYPE>标记。删除！他们立即做出决定，然后若无其事的继续往下看。但看了一遍之后，却发现这些代码与自己平常写的没有什么不同啊。
为什么相同的代码，就我的会遇到兼容性问题，别人的却不会？难道是我人品不好？设计师们更疑惑了，于是再次打开网页查看。接着，他们惊呆了----之前本来不存在的兼容性问题，现在又出现了！！！
而在整个过程中，自己所做的唯一一件事，就是删除<!DOCTYPE>标记。
不会吧？！设计师不敢相信自己的推断。难道……他们将信将疑的把<!DOCTYPE>加入自己之前一直无法解决兼容性问题的网页，并在各个浏览器中测试。
测试的结果证明了他们的猜想：在加了HTML4.01的<!DOCTYPE>之后，网页在每个浏览器中看起来都差不多，几乎一模一样！！！
至此，设计师长舒了一口气，以后再也不用做该死的浏览器兼容了。
以上就是<!DOCTYPE>标记的作用。
为了兼容老版本的浏览器（如IE5等），很多浏览器默认都使用混杂模式（或者说兼容模式）来渲染网页。而各浏览器的混杂模式是各不相同的，这就是浏览器兼容问题的来源。
但是即使是很老的IE6也有标准模式，新的浏览器就更不用说了。在标准模式中各个浏览器都用W3C定义的标准方式去渲染网页，自然就不存在兼容问题了（只要你不使用各浏览器独有的CSS属性即可）。
而在网页开头（第一行）添加<!DOCTYPE>标签是开启HTML4.01标准渲染模式的唯一方式。
所以千万别再删<!DOCTYPE>了。
HTML4.01的<!DOCTYPE>有好几种，比如宽容、严格、框架专用，不同的<!DOCTYPE>页面显示的效果都有些许不同。另外还有XHTML1.1以及HTML5的<!DOCTYPE>，你得根据需要选择。