指定網(wǎng)頁doctype解決CSS Hacking
2024-07-11 08:43:16
供稿：網(wǎng)友
我們都知道，要做WD（web designer）,首先得伺侯好幾個(gè)瀏覽器:IE6,IE7,Firefox.一般的頁面，都只要求在IE6,IE7,Firefox下正常工作就行了。
但是實(shí)際上，瀏覽器遠(yuǎn)遠(yuǎn)不止這幾個(gè),Firefox分為Firefox 1.5,Firefox 2,Firefox 3幾個(gè)主要版本，IE7,IE6中也各有好幾個(gè)系列,另外除開這兩個(gè)主流廠商的產(chǎn)品之外，還有Opera,Konqueror,Netscape,chrome等一系列。
這些瀏覽器，各有各的一套，往往在這里運(yùn)行正常，在那里運(yùn)行就不正常了。于是WD們拆東邊補(bǔ)西邊，終于能在幾個(gè)瀏覽器下都正常了。結(jié)果，產(chǎn)品經(jīng)理又有了新的需求，需要在哪兒哪兒那兒改一下，于是乎，好不容易糊弄好的的紙架子一下子倒塌了，WD們又忙得焦頭爛額。之所以這么說，因?yàn)椋@是我的經(jīng)驗(yàn)。
大凡是WD，總是收集了一堆Css Hacking 技巧，為的是在各個(gè)瀏覽器下正常。網(wǎng)上一搜，一大堆。
然而，首先WD們沒有弄清楚一個(gè)基本問題，我們?yōu)槭裁葱枰猚ss Hacking?如果有1000種瀏覽器,我們是不是要記住1000種瀏覽器的Hack 技巧？
事實(shí)上, Css Hacking從某種程度上說，是一個(gè)拿不上臺(tái)面的東西。Css Hacking有很多技巧，純粹就是利用了瀏覽器的Bug.比如常見的用_class{….} 去區(qū)別IE和firefox,按理說_class是一個(gè)不合法的標(biāo)記方法。Css Hacking的出現(xiàn)，是WD們不得已而為之，WD們的日常工作并不是瘋狂地Css Hack.
其實(shí)這么多瀏覽器,并不是可以隨便亂來，想自己定義個(gè)啥就定義個(gè)啥標(biāo)記的。人們習(xí)慣了在標(biāo)準(zhǔn)的世界里生活，在網(wǎng)頁世界里，也有一系列標(biāo)準(zhǔn)。瀏覽器們也都努力地做到web標(biāo)準(zhǔn)兼容。但是有些瀏覽器出道得早，可以說后來出現(xiàn)的web標(biāo)準(zhǔn)就是在它們的影響下誕生的。還有一個(gè)，當(dāng)年非常牛B,所以做了很多創(chuàng)新，沒有把web標(biāo)準(zhǔn)放在心上，蠻不在乎。更何況，標(biāo)準(zhǔn)自身也是在不斷更新的。因此，一般各個(gè)瀏覽器產(chǎn)品系統(tǒng)都曾有過一段沒有不太在乎web標(biāo)準(zhǔn)的日子，后來大家都意識(shí)到不行了，我們大家都妥協(xié)一下，要制訂一套標(biāo)準(zhǔn)，大家都遵守。可是以前各家都有自己制訂的一些小條條小框框，他們不符合標(biāo)準(zhǔn)，咋辦呢?
于是，這些人想了個(gè)法子：標(biāo)準(zhǔn)模式和怪異模式。另外還有一種，叫“近乎標(biāo)準(zhǔn)模式”,almost standard.要說真是夠怪異，我都聽暈了。別著急，聽我慢慢道來。
不是說了嗎，這些老大們坐在一起，制定了各式各樣的標(biāo)準(zhǔn)，以后大家都按這套標(biāo)準(zhǔn)來解釋網(wǎng)頁。如果你做的網(wǎng)頁可以按這套標(biāo)準(zhǔn)來解釋，那就用一個(gè)標(biāo)記doctype注明這是可以按web標(biāo)準(zhǔn)來解釋的。這就是標(biāo)準(zhǔn)模式。
那以前各家都生產(chǎn)過，規(guī)定過的小九九們不符合標(biāo)準(zhǔn)，咋辦啊？也不能就馬上把它們?nèi)拥舨灰税?軟件上大抵有這樣一套原則，叫向下兼容。在怪異模式下，各個(gè)瀏覽器都模擬那些老版本的瀏覽器的操作，以防止老的頁面無法工作。在網(wǎng)頁沒有指定doctype時(shí)，瀏覽器一般就都按怪異模式工作，以防老頁面無法工作。
對(duì)于這兩種模式之間的差異，最顯著的例子涉及Windows上IE專有的框模型。在IE 6出現(xiàn)時(shí)，在標(biāo)準(zhǔn)模式中使用正確的框模型，在怪異模式中使用老式的專有框模型。為了維持對(duì)IE 5和更低版本的向后兼容性，Opera 7和更高版本也在怪異模式中使用有缺點(diǎn)的IE框模型。
Mozilla和Safari還有第三種模式，稱為“幾乎標(biāo)準(zhǔn)的模式（almost standards mode）”，除了在處理表格的方式方面有一些細(xì)微的差異之外，這種模式與標(biāo)準(zhǔn)模式相同。
正是由于這個(gè)原因，您可以丟掉很多css hacking技巧了。有些書介紹說，IE6和firefox的盒模型（或者有的地方叫框模型)不一致，因此需要這樣做hack:
div{
width:100px;
*width:95px;
}
我說，這種書真是誤人子弟。因?yàn)椋灰_指定了doctype,這些瀏覽器解釋上的差異就都不存在了，我們按照標(biāo)準(zhǔn)來就行了。
這個(gè)模式的指位于HTML文件開頭的DOCTYPE域指定的。一般常見的有這幾種:
HTML 4.01 Transitional：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
