没有<!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>,你得根据需要选择。
之前我给爱特文管SVN版加上了WAP2.0的DOCTYPE标签,前几天,我用IE8和傲游访问时始终卡住无法显示。我很奇怪为什么。后来IE8终于出现个错误提示:处理DTD …… 出错。貌似之所以那么慢是因为它把DTD下载下来了。不知道每次用电脑浏览器第一次访问虎绿林很慢是不是因为浏览器在下载DTD