DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 指定網頁doctype解決CSS Hacking
指定網頁doctype解決CSS Hacking
編輯:CSS進階教程     

  我們都知道,要做WD(web designer),首先得伺侯好幾個浏覽器:IE6,IE7,Firefox.一般的頁面,都只要求在IE6,IE7,Firefox下正常工作就行了。

  但是實際上,浏覽器遠遠不止這幾個,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:

<!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">

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved