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