瀏覽器怪異模型和標準模型的區別

Moxmi 發布于2019-08-02 11:13 / 819人閱讀

摘要：從開始，引入了模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。這就是模式怪癖模式，詭異模式，怪異模式。

??從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。

??在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

??在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD（文檔類型定義）當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定

??DTD是為英文*Document Type Definition，中文意思為“文檔類定義”。

??如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

他們的區別：

在嚴格模式中：給元素設置的寬度 = content;在怪癖模式中：給元素設置的寬度 = content+padding+border

可以設置行內元素的高寬

在Standards模式下，給span等行內元素設置wdith和height都不會生效

在quirks模式下，則會生效。

可設置百分比的高度

在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的

用margin:0 auto設置水平居中在IE下會失效

使用margin:0 auto在standards模式下可以使元素水平居中

但在quirks模式下卻會失效;

quirk模式下的解決辦法，用text-align屬性:

body{text-align:center};
#content{text-align:left}

quirk模式下設置圖片的padding會失效

quirk模式下Table中的字體屬性不能繼承上層的設置

quirk模式下white-space:pre會失效

GPU云服務器云服務器的對象模型云模型的計算人工智能的模型 hbase的數據模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52842.html

瀏覽器怪異模型和標準模型的區別

摘要：從開始，引入了模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。這就是模式怪癖模式，詭異模式，怪異模式。 ??從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。 ??在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，...

CoyPan 2019-08-29 16:23 評論0 收藏0
《50道CSS基礎面試題（附答案）》中的答案真的就只是答案嗎？

摘要：背景想想自己為什么要寫這個，難道不是因為這篇道基礎面試題附答案文章最近被轉載的多，比較多而湊熱鬧蹭熱點顯然，肯定是因為這樣我才打算寫的。繼承得到的樣式的優先級最低。背景想想自己為什么要寫這個，難道不是因為這篇《50道CSS基礎面試題（附答案）》文章最近被轉載的多，比較多而湊熱鬧蹭熱點？顯然，肯定是因為這樣我才打算寫的。而且還有就是，我的公眾號也很久沒有更新了，微信說長期不更新會關掉...

DataPipeline 2019-08-30 14:11 評論0 收藏0
標準盒模型、怪異盒模型對比與應用

摘要：百度標準盒模型，所有的介紹都是在標準模式下，一個塊的總寬度左右左右左右在怪異模式下，一個塊的總寬度左右既已經包含了和值然后再介紹一下新屬性那么，到底這兩個公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標準百度標準盒模型，所有的介紹都是在標準模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)在怪異模式下...

keithxiaoy 2019-08-29 12:59 評論0 收藏0
前端工作面試HTML相關問題

摘要：前端工作面試相關問題文檔類型的作用是什么在中有兩個主要目的。而當元素的內容只有圖片時，如的單元格。在下，單元格中的圖片的屬性默認為，因此，在圖片底部會有幾像素的空間。所以百分比的高度必須在父元素有聲明高度時使用。關閉窗口后，即被銷毀。前端工作面試HTML相關問題 Q: doctype（文檔類型）的作用是什么？ A: 在HTML中 doctype 有兩個主要目的。對文檔進...

iamyoung001 2019-08-01 14:40 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0