1.背景介紹
quirks模式是瀏覽器的怪異模式,該模式下瀏覽器對(duì)頁(yè)面的渲染會(huì)比較怪異
我們平時(shí)使用的都是standards模式赴涵,又稱strict模式
2:QUIRKS來(lái)歷
在W3C標(biāo)準(zhǔn)出臺(tái)以前, 瀏覽器在對(duì)頁(yè)面的渲染上沒有統(tǒng)一規(guī)范减牺,產(chǎn)生了差異 (Quirks mode或者稱為Compatibility Mode)胡岔;由于W3C標(biāo)準(zhǔn)的推出殿如, 瀏覽器渲染頁(yè)面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standars mode), 這就是二者最簡(jiǎn)單的區(qū)別棍潘。
W3C標(biāo)準(zhǔn)推出以后裕偿,瀏覽器都開始采納新標(biāo)準(zhǔn), 在標(biāo)準(zhǔn)出來(lái)以前爪幻,很多頁(yè)面都是根據(jù)舊的渲染方法編寫的菱皆,
如果使用新的標(biāo)準(zhǔn)來(lái)渲染,將導(dǎo)致頁(yè)面顯示異常挨稿。
使以前的頁(yè)面能夠正常瀏覽仇轻,瀏覽器都保留了舊的渲染方法 這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standars mode, 兩種渲染方法共存在一個(gè)瀏覽器上奶甘。
3:如何開啟瀏覽器的QUIRKS模式呢
關(guān)鍵在于html文件第一行的聲明篷店,!doctype html 如果我們把這一行刪除掉,或者在這一行隨意加上幾個(gè)字母臭家, 使瀏覽器無(wú)法識(shí)別疲陕,那么就開啟了瀏覽器的quirks模式
4:如何確認(rèn)是不是開啟了quirks模式
在js中使用這個(gè)代碼
document.compatMode:
如果輸出結(jié)果為backCompat,則開啟了quirks模式
如果輸出結(jié)果為css1compat钉赁,則開啟的是standards模式
5:那么quirks模式到底和我們?nèi)粘J褂玫膕trict模式有什么區(qū)別呢
據(jù)本人在網(wǎng)上搜索的資料蹄殃,最大的區(qū)別在于盒模型
在我們學(xué)習(xí)盒模型中
元素實(shí)際寬度=margin*2+border*2+padding*2+width
但是據(jù)資料顯示,在quirks模式中你踩,
元素內(nèi)容寬度=width-margin*2-border*2-padding*2
但是經(jīng)過(guò)demo窃爷,我們發(fā)現(xiàn),在quirks模式下姓蜂,有些特性和資料顯示不符按厘, 搜索相關(guān)資料發(fā)現(xiàn),盒模型的差異钱慢,很有可能只存在于ie6中逮京,
經(jīng)過(guò)確認(rèn)的區(qū)別有一個(gè),在嚴(yán)格模式下束莫,給塊級(jí)元素直接設(shè)置height:10%,設(shè)置百分比高度是無(wú)效的懒棉,但是在quirks模式下,百分比高度是有效的
6:總結(jié)
quriks已經(jīng)是上個(gè)時(shí)代的產(chǎn)物览绿,我們對(duì)他有簡(jiǎn)單的了解就好策严, 畢竟這個(gè)東西,現(xiàn)在已經(jīng)不再使用了饿敲,我們基本上是用不到的