瀏覽器模式詳解

瀏(liu)覽(lan)器廠商出于(yu)那些老(lao)(lao)站點的向后(hou)兼容(rong)的目的，創建(jian)了(le)兩種模(mo)式(shi)(shi)。即(ji)標準模(mo)式(shi)(shi)(standards mode)和怪異模(mo)式(shi)(shi)(quirks mode)。在標準模(mo)式(shi)(shi)里，瀏(liu)覽(lan)器按照規范渲染頁面，而(er)在怪異模(mo)式(shi)(shi)里，瀏(liu)覽(lan)器以一(yi)種老(lao)(lao)式(shi)(shi)的或者是模(mo)擬老(lao)(lao)式(shi)(shi)瀏(liu)覽(lan)器的渲染方式(shi)(shi)表現頁面。

這(zhe)些并(bing)(bing)沒有(you)錯，但是(shi)(shi)還(huan)不夠全(quan)面(mian)和深入。當我(wo)回顧(gu)《CSS Mastery》一書的時(shi)候，也讓我(wo)想起了(le)很多漸(jian)漸(jian)淡(dan)忘(wang)的、并(bing)(bing)且也可能是(shi)(shi)無關緊要的其他(ta)碎片。

比(bi)如(ru)，兩種模式最大的差異(yi)的例子就是(shi)IE盒模型的解釋。IE如(ru)此，Opera 7也是(shi)如(ru)此。再比(bi)如(ru)，Mozilla和Safari的第三種“準(zhun)標(biao)準(zhun)模式(almost standards mode)”，只是(shi)在處理表格的方式上有些細微的差異(yi)，其他與(yu)標(biao)準(zhun)模式無(wu)異(yi)。等(deng)等(deng)。

一(yi)直以來，確保(bao)DOCTYPE的正確也是(shi)非常(chang)重要的事(shi)。瀏覽器根據DOCTYPE是(shi)否存在(zai)以及是(shi)何種DOCTYPE來確定渲(xuan)染方(fang)式。如果(guo)總結如表，應(ying)該(gai)是(shi)這個樣子。

實(shi)際工作中，一般都不(bu)會忘記去添(tian)加DOCTYPE，所(suo)以很多情況都只是(shi)我們無意為之(zhi)。比如IE6，當DOCTYPE不(bu)是(shi)頁面(mian)(mian)的(de)第(di)一個元素的(de)時候，就會進入怪異模式。這導致在頁面(mian)(mian)開頭添(tian)加XML文件(jian)的(de)可選聲明也會使頁面(mian)表現(xian)出人意(yi)料。之(zhi)后的IE7修復了這個(ge)bug，但(dan)卻不完(wan)全。在IE7中，一個(ge)xml聲明(ming)并不會再導(dao)致進入(ru)怪異(yi)模式，但(dan)是這并不表示在DOCTYPE之(zhi)前加入(ru)其他(ta)東西也能不觸發。比如html注釋。

另一個(ge)需要小心的(de)(de)陷(xian)阱就是BOM頭(tou)。當php處理UTF文件的(de)(de)時候會把BOM讀成(cheng)字符，include之后就可能會跑(pao)到DOCTYPE前面，從而再次觸發IE的(de)(de)怪異(yi)模式。所以(yi)保(bao)存(cun)UTF8編(bian)碼的(de)(de)時候可以(yi)選無BOM，BOM對于UTF8的(de)(de)意義(yi)本來(lai)就不大。

現在(zai)的(de)最新的(de)HTML5，DOCTYPE簡(jian)化到只剩下

!DOCTYPE html

對此(ci)w3cschool上的(de)解釋是(shi)這樣的(de)：HTML 4.01 中的(de) doctype 需(xu)要引用一(yi)個(ge) DTD，這是(shi)因為(wei) HTML 4.01 基(ji)于(yu) SGML。HTML 5 不(bu)基(ji)于(yu) SGML，也(ye)不(bu)需(xu)要引用 DTD，但是(shi)需(xu)要聲明文檔類型讓(rang)瀏覽器按照它們應(ying)該(gai)的(de)方(fang)式(shi)來運行(xing)。

事實證(zheng)明，IE只要認到 !DOCTYPE html就進(jin)入了(le)標(biao)準(zhun)模(mo)式了(le)。

最(zui)后記錄些DOCTYPE，發覺自己總是在復制他(ta)們~

HTML 4.01 Strict
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “//www.w3.org/TR/html4/strict.dtd”

HTML 4.01 Frameset
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “//www.w3.org/TR/html4/frameset.dtd”

HTML 4.01 Transitional
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “//www.w3.org/TR/html4/loose.dtd”

XHTML 1.0 Strict
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

XHTML 1.0 Frameset
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”

XHTML 1.0 Transitional
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

XHTML 1.1
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”