[標(biāo)準(zhǔn)模式與混雜模式]

[標(biāo)準(zhǔn)模式與混雜模式]

關(guān)于渲染模式:
在多年以前(IE6誕生以前),各瀏覽器都處于各自比較封閉的發(fā)展中(基本沒有兼容性可談)。隨著WEB的發(fā)展,兼容性問題的解決越來
越顯得迫切,隨即,各瀏覽器廠商發(fā)布了按照標(biāo)準(zhǔn)模式(遵循各廠商制定的統(tǒng)一標(biāo)準(zhǔn))工作的瀏覽器,比如IE6就是其中之一。但是考慮到以
前建設(shè)的網(wǎng)站并不支持標(biāo)準(zhǔn)模式,所以各瀏覽器在加入標(biāo)準(zhǔn)模式的同時也保留了混雜模式(即以前那種未按照統(tǒng)一標(biāo)準(zhǔn)工作的模式,也叫怪
異模式)。經(jīng)過多年的發(fā)展,后來又出現(xiàn)了近似標(biāo)準(zhǔn)模式(在一種模式中同時融入標(biāo)準(zhǔn)模式和部分混雜模式的特性,也稱為接近標(biāo)準(zhǔn)模式、
準(zhǔn)標(biāo)準(zhǔn)模式、最有限混雜模式)和超級標(biāo)準(zhǔn)模式(近似標(biāo)準(zhǔn)模式、標(biāo)準(zhǔn)模式、超級標(biāo)準(zhǔn)模式三者也共同被稱作標(biāo)準(zhǔn)模式)。因此,瀏覽器的
模式可以分為兩類:標(biāo)準(zhǔn)模式和混雜模式,其中,標(biāo)準(zhǔn)模式又可更嚴(yán)格的分為近似標(biāo)準(zhǔn)模式、標(biāo)準(zhǔn)模式、超級標(biāo)準(zhǔn)模式。
需要注意的是,不同廠商瀏覽器的標(biāo)準(zhǔn)模式也是有細(xì)微差別的(這是標(biāo)準(zhǔn)實(shí)現(xiàn)程度的問題)。此外,同品牌不同版本瀏覽器的標(biāo)準(zhǔn)模式也是
有差別的,比如IE6&IE7時代的標(biāo)準(zhǔn)模式在現(xiàn)在看來或許已經(jīng)不那么標(biāo)準(zhǔn)了(IE8和IE9都在不斷的提高標(biāo)準(zhǔn)的實(shí)現(xiàn)程度,因此差距越來越大是
必然的),但盡管如此它們依然叫做標(biāo)準(zhǔn)模式,畢竟它們在那個特定時代那個特定版本中確實(shí)是按照盡可能遵循標(biāo)準(zhǔn)的方式工作的。
什么是DOCTYPE:
DOCTYPE,或者稱為 Document Type Declaration(文檔類型聲明,縮寫 DTD)。通常情況下,DOCTYPE 位于一個 HTML 文檔的最前面的
位置,位于根元素 HTML 的起始標(biāo)簽之前。這樣一來,在瀏覽器解析 HTML 文檔正文之前就可以確定當(dāng)前文檔的類型,以決定其需要采用的
渲染模式(不同的渲染模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析)。
DOCTYPE與各種模式的關(guān)系:
混雜模式:
不寫DOCTYPE
近似標(biāo)準(zhǔn)模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
標(biāo)準(zhǔn)模式:
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我們可以看到,過渡型或框架型HTML聲明與過渡型或框架型XHTML聲明均可使瀏覽器進(jìn)入近似標(biāo)準(zhǔn)模式,同時,html5的DOCTYPE聲明和嚴(yán)
格型HTML聲明以及嚴(yán)格型XHTML聲明則會使瀏覽器進(jìn)入標(biāo)準(zhǔn)模式。
三種模式下的表現(xiàn)差異:
首先,混雜模式是不可取的,因為其沒有兼容性可言。在IE(IE6~IE9)中,混雜模式即使用IE5.5內(nèi)核來解析并渲染頁面。其次,近似標(biāo)準(zhǔn)
模式是在盡可能遵循標(biāo)準(zhǔn)的基礎(chǔ)上兼容部分非標(biāo)準(zhǔn)代碼,比如一些已經(jīng)棄用的標(biāo)簽等。標(biāo)準(zhǔn)模式則是對統(tǒng)一標(biāo)準(zhǔn)實(shí)現(xiàn)最好的模式,它要求標(biāo)
簽必須閉合(唯一不需要閉合的就是DOCTYPE標(biāo)簽),不能使用已經(jīng)廢棄的標(biāo)簽等等。目前,使用最多的DOCTYPE聲明為過渡型HTML或
XHTML,因為它能最大話的兼容一些老代碼。不過,技術(shù)領(lǐng)先的公司(比如google、facebook、twitter等都如此)都已經(jīng)使用了html5的
DOCTYPE聲明,即<!DOCTYPE html>,它所觸發(fā)的模式與嚴(yán)格型HTML或嚴(yán)格型XHTML所觸發(fā)的模式完全相同,但好處是節(jié)省代碼且向前兼
容(HTML5時代)。
其它激活混雜模式的情況:
前面已經(jīng)介紹了,當(dāng)我們不寫DOCTYPE聲明時,所有瀏覽器都會進(jìn)入混雜模式。但是也存在一些因其他情況而進(jìn)入混雜模式的時候,這些情
況都是我們應(yīng)該避免的,最常見的就是在DOCTYPE聲明前面出現(xiàn)了這些內(nèi)容:普通文本、HTML 標(biāo)簽、HTML 注釋、XML 聲明、IE條件注
釋。對于普通文本和HTML標(biāo)簽,各瀏覽器均進(jìn)入了混雜模式,這個很好理解,都看到疑似的HTML文檔正文了,瀏覽器就不需要再往下追查
DOCTYPE在哪里了。對于HTML注釋和XML聲明,它們和上面的普通文本和HTML標(biāo)簽有些差別,它們不會在頁面中展示出來,即不可視。這
時,有的瀏覽器則顯得十分“智能”,非IE瀏覽器均會忽略它們的存在,DOCTYPE 被正確解析。但是在IE6中,DOCTYPE之前的 XML 聲明會導(dǎo)
致頁面進(jìn)入混雜模式,而如果DOCTYPE之前出現(xiàn)了HTML注釋,則所有IE都會進(jìn)入混雜模式。有的作者很聰明,他既在DOCTYPE之前加入了
他需要的內(nèi)容,卻又沒有使IE由于這些內(nèi)容而進(jìn)入混雜模式。他可能會這么寫:

<![if !IE]><![endif]>
<![if false]><![endif]>
上面這些IE條件注釋在非IE瀏覽器中,可能完全被忽略,可能被解釋為普通HTML注釋。但是在IE中它們?nèi)肯Я耍驗檫@就是IE條件注釋
的作用。所以這也是目前比較合適的在DOCTYPE之前寫點(diǎn)什么又保證所有瀏覽器均為標(biāo)準(zhǔn)模式的做法,但我們?nèi)匀徊煌扑]在DOCTYPE之前
加入任何非空白內(nèi)容。
用JS判斷瀏覽器當(dāng)前的模式:
document.write(document.compatMode == "CSS1Compat" ? "當(dāng)前處于標(biāo)準(zhǔn)模式" : "當(dāng)前處于混雜模式");

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內(nèi)容