是瀏覽器按照W3C標(biāo)準(zhǔn)解析執(zhí)行代碼,這樣用規(guī)定的語(yǔ)法去渲染,就可以兼容各個(gè)瀏覽器,保證以正確的形式展示網(wǎng)頁(yè)。
怪異模式:是使用瀏覽器自己的方式解析執(zhí)行代碼,因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣,所以我們稱(chēng)之為怪異模式。
為什么還要存在怪異模式呢?在HTML與CSS的標(biāo)準(zhǔn)化未完成之前,各個(gè)瀏覽器對(duì)于HTML和CSS的解析有各自不同的實(shí)現(xiàn),而有很多舊的網(wǎng)頁(yè)都是按照這些非標(biāo)準(zhǔn)的實(shí)現(xiàn)去設(shè)計(jì)的。在HTML與CSS標(biāo)準(zhǔn)確定之后,瀏覽器一方面要按照標(biāo)準(zhǔn)去實(shí)現(xiàn)對(duì)HTML與CSS的支持,另一方面又要保證對(duì)非標(biāo)準(zhǔn)的舊網(wǎng)頁(yè)設(shè)計(jì)的后向兼容性。因此,現(xiàn)代的瀏覽器一般都有兩種渲染模式:標(biāo)準(zhǔn)模式和怪異模式。在標(biāo)準(zhǔn)模式下,瀏覽器按照HTML與CSS標(biāo)準(zhǔn)對(duì)文檔進(jìn)行解析和渲染;而在怪異模式下,瀏覽器則按照舊有的非標(biāo)準(zhǔn)的實(shí)現(xiàn)方式對(duì)文檔進(jìn)行解析和渲染。
瀏覽器如何確定使用哪種渲染模式?如果你的頁(yè)面添加了 !DOCTYPE html (注意:大小寫(xiě)不敏感),那么就等同于開(kāi)啟了標(biāo)準(zhǔn)模式。即如下面代碼展示:
!DOCTYPE html html head meta charset= UTF-8 title /title /head body /body /html
如果省略了,瀏覽器會(huì)采用不符合某些標(biāo)準(zhǔn)的渲染模式。
標(biāo)準(zhǔn)模式與怪異模式的常見(jiàn)區(qū)別盒模型的處理差異:標(biāo)準(zhǔn)CSS盒模型的寬度和高度等于內(nèi)容區(qū)的高度和寬度,不包含內(nèi)邊距和邊框,而IE6之前的瀏覽器實(shí)現(xiàn)的盒模型的寬高計(jì)算方式是包含內(nèi)邊距和邊框的。因此,對(duì)于IE,怪異模式和標(biāo)準(zhǔn)模式下的盒模型寬高計(jì)算方式是不一樣的;
行內(nèi)元素的垂直對(duì)齊:很多早期的瀏覽器對(duì)齊圖片至包含它們的盒子的下邊框,雖然CSS的規(guī)范要求它們被對(duì)齊至盒內(nèi)文本的基線(xiàn)。標(biāo)準(zhǔn)模式下,基于Gecko的瀏覽器將會(huì)對(duì)齊至基線(xiàn),而在quirks模式下它們會(huì)對(duì)齊至底部。最直接的例子就是圖片的顯示。在標(biāo)準(zhǔn)模式下,圖片并不是與父元素的下邊框?qū)R的,如果仔細(xì)觀(guān)察,你會(huì)發(fā)現(xiàn)圖片與父元素下邊框之間存在一點(diǎn)小空隙。那是因?yàn)闃?biāo)準(zhǔn)模式下,圖片是基線(xiàn)對(duì)齊的。而怪異模式下,則不存在這個(gè)問(wèn)題。
以上就是瀏覽器中關(guān)于標(biāo)準(zhǔn)模式與怪異模式的解析的詳細(xì)內(nèi)容,html教程
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注