指定網頁的doctype解決CSS Hacking方法總整理_經驗交流

但實際上，瀏覽器遠遠不止這幾款,Firefox分為Firefox 1.5,Firefox 2,Firefox 3幾個主要版本，IE7,IE6中也各有好幾個系列,另外除開這兩個主流廠商的產品之外，還有Opera,Konqueror,Netscape,chrome等一系列。

　　這些瀏覽器，各有各的一套，往往在這裡運作正常，在那裡運作就不正常了。於是WD們拆東邊補西邊，終於能在幾個瀏覽器下都正常了。結果，產品經理又有了新的需求，需要在哪裡哪兒那兒改一下，於是乎，好不容易糊弄好的的紙架子一下子倒塌了，WD們又忙得焦頭爛額。之所以這麼說，因為，這是我的經驗。

　　大凡是WD，總是收集了一堆Css Hacking 技巧，為的是在各個瀏覽器下正常。網上一搜，一大堆。

　　然而，首先WD們沒有弄清楚一個基本問題，我們為什麼需要css Hacking?如果有1000種瀏覽器,我們是不是要記住1000種瀏覽器的Hack 技巧？

　　事實上, Css Hacking從某種程度上說，是一個拿不上檯面的東西。 Css Hacking有很多技巧，純粹就是利用了瀏覽器的Bug.例如常見的用_class{….}​​ 去區別IE和firefox,按理說_class是一個不合法的標記方法。 Css Hacking的出現，是WD們不得已而為之，WD們的日常工作並不是瘋狂地Css Hack.

　　其實這麼多瀏覽器,並不是可以隨便亂來，想自己定義個啥就定義個啥標記的。人們習慣了在標準的世界裡生活，在網頁世界裡，也有一系列標準。瀏覽器們也都努力做到web標準相容。但有些瀏覽器出道得早，可以說後來出現的web標準就是在它們的影響下誕生的。還有一個，當年非常牛B,所以做了很多創新，沒有把web標準放在心上，蠻不在乎。更何況，標準本身也是在不斷更新的。因此，一般各瀏覽器產品系統都曾有過一段沒有不太在乎web標準的日子，後來大家都意識到不行了，我們大家都妥協一下，要製訂一套標準，大家都遵守。可是以前各家都有自己製訂的一些小條條小框框，他們不符合標準，咋辦呢?

　　於是，這些人想了個法子：標準模式和怪異模式。另外還有一種，叫「近乎標準模式」,almost standard.要說真是夠怪異，我都聽暈了。別急，聽我慢慢道來。

　　不是說了嗎，這些老大們坐在一起，制定了各式各樣的標準，以後大家都按這套標準來解釋網頁。如果你做的網頁可以用這套標準來解釋，那就用一個標記doctype註明這是可以用web標準來解釋的。這就是標準模式。

　　那以前各家都生產過，規定過的小九九們不符合標準，咋辦啊？也不能就馬上把它們全扔掉不要了吧?軟體上大抵有這樣一套原則，叫向下兼容。在怪异模式下，各个浏览器都模拟那些老版本的浏览器的操作，以防止老的页面无法工作。在网页没有指定doctype时，浏览器一般就都按怪异模式工作，以防老页面无法工作。

　　对于这两种模式之间的差异，最显著的例子涉及Windows上IE专有的框模型。在IE 6出现时，在标准模式中使用正确的框模型，在怪异模式中使用老式的专有框模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。

　　Mozilla和Safari还有第三种模式，称为“几乎标准的模式（almost standards mode）”，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式相同。

　　正是由于这个原因，您可以丢掉很多css hacking技巧了。有些书介绍说，IE6和firefox的盒模型（或者有的地方叫框模型)不一致，因此需要这样做hack:

div{
width:100px;
*width:95px;
}

　　我说，这种书真是误人子弟。因为，只要正确指定了doctype,这些浏览器解释上的差异就都不存在了，我们按照标准来就行了。

　　这个模式的指位于HTML文件开头的DOCTYPE域指定的。一般常见的有这几种:

HTML 4.01 Transitional：

复制代码 代码如下:

HTML 4.01 Frameset

复制代码 代码如下:

　　XHTML 1.0 Strict

复制代码 代码如下:

XHTML 1.0 Transitional

复制代码 代码如下:

　　XHTML 1.0 Frameset

複製程式碼 程式碼如下:

div>
　　XHTML 1.1

複製程式碼 程式碼如下: