2. 程式人生 > >quirks mode(怪異模式) 和 standard mode(標準模式)

quirks mode(怪異模式) 和 standard mode(標準模式)

阿新 • • 發佈：2019-01-18

出現的背景

在很久之前的瀏覽器，還是Netscape Navigator和 Microsoft Internet Explorer的時候，頁面主要就是為這兩個瀏覽器寫的。但是到了今天了，firefox、chrome、opera等瀏覽器的興起，再加上W3C建立了web標準。本來要是早統一標準，我們就不用為一個瀏覽器相容的問題搞得頭昏腦漲。但是一些網站還是主要為之前的Netscape和Microsoft瀏覽器做的，所以如果用我們現在的web標準去要求瀏覽器廠家實現的話，之前的一些網站就不能用了，所以瀏覽器就出現可以有兩種模式可以切換，實現向後相容。或者說，瀏覽器開發商又要對標準化的HTML、CSS支援，又要對之前做的網站也就是非標準的網站實現向後相容。

如何觸發這兩種模式

說到這裡，我們說說標籤的作用，之前對HTML標籤還不怎麼感冒的，就看了一些W3C的介紹，然後就做了一些可用的介面，覺得HTML好像挺簡單似的，入門沒什麼壓力呀。等到現在，越來越認識到HTML作為Web前端的結構，是一個頁面的骨架，確實很重要，還有加上了語義化標籤，漸漸地對HTML刮目相看。回到正題，我想說的是也是我忽略的一個標籤，可能是看了往年大公司面試題的原因吧，覺得它似乎挺重要的。

DOCTYPE標籤的使用跟每個屬性的作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • html：表示該文件的跟元素為html
  • PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 一個文件型別的公共識別符號，是一個xhtml1.0的過渡文件。解析到這裡，瀏覽器就去尋找這個DTD，如果找到了就用這個DTD的要求去渲染你的網頁，如果找不到呢？看下面
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 瀏覽器找不到DTD的話，就去到這個url那裡下載DTD並使用。

DOCTYPE標籤的作用

  • 跟瀏覽器說要用那個DTD來解析我的網頁
  • 能對介面進行有效性驗證
  • 實現怪異和標準模式的切換

        我們把重點放在兩種模式的切換 

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    這個將會觸發瀏覽器的標準模式，因為該DOCTYPE標籤包括了DTD、URI； 還有就是DOCTYPE標籤有DTD但是沒有URI也會觸發瀏覽器的標準模式
  • <!DOCTYPE html PUBLIC >
    這個會觸發瀏覽器的怪異模式，因為該DOCTYPE標籤中沒有DTD、URI。 這裡再說明一點就是如果DOTYPE標籤沒有DTD但是有URI還是會觸發怪異模式
  • <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    這兩個都會在IE6中觸發怪異模式，因為IE6一定要DOCTYPE為文件的第一個元素才肯觸發標準模式

檢測當前瀏覽器使用的模式

我現在只能想到一種方式去檢測瀏覽器的模式，就是用js來實現的，如果在看的您要是有更好的idea的話，請告訴我！其實它瀏覽器的相容性還是可以的。

javascript程式碼：document.compatMode
(1)BackCompat：標準相容模式關閉;
(2)CSS1Compat：標準相容模式開啟

標準模式下的頁面與怪異模式下的頁面區別

  • 在height、width應用的元素有區別

    <span style="height: 40px; width: 200px; background: red;margin:10px">
			我是行內元素span，但是我可以在quirks模式下用width、height屬性
		</span>
    在IE的怪異模式下，我們可以看下介面
    表現得跟塊級元素一模一樣呀。
    再來看在IE的標準模式下，介面是什麼樣子的
  • 區別最大要數盒子模型不一樣，對於IE quirk模式下
    box width = content width + padding left + padding right + border left + border right，
    box height = content height + padding top + padding bottom + border top + border bottom，
    但是在W3C標準下：
    box width = content width，
    box height = content height，

    這樣的話，會導致什麼情況呢？我們來看下例子先：

    .div {
				border: 5px solid blue;
				height: 60px;
				width: 200px;
			}
    自己在HTML再新增一個div元素，它的class為div就行了。
    在IE quirks model中：


    但是在IE8 standard model中：


    說明下：圖片的盒子模型是在IE的開發者工具中截圖出來的，紅色框應該表示的是border+padding+content的width、height
  • 元素溢位處理方式不同
    在 IE Standard Mode 下，overflow 取預設值 visible，即溢位可見，這種情況下，溢位內容不會被裁剪，呈現在元素框外。而在 Quirks Mode 下，該溢位被當做擴充套件 box 來對待，即元素的大小由其內容決定，溢位不會被裁剪，元素框自動調整，包含溢位內容。
    其實就是說quirks model會自動包含溢位的子元素。
其他方面不一樣還是有的，有興趣的話，自己百度google下吧！

參考文獻

Quirks Mode and Standards Mode
DOCTYPE與瀏覽器模式分析
Quirks mode
Quirks mode and strict mode
怪異模式（Quirks Mode）對 HTML 頁面的影響

相關推薦

quirks mode(怪異模式) 和 standard mode(標準模式)

出現的背景 在很久之前的瀏覽器，還是Netscape Navigator和 Microsoft Internet Explorer的時候，頁面主要就是為這兩個瀏覽器寫的。但是到了今天了，firefox、chrome、opera等瀏覽器的興起，再加上W3C建立了web標準。

觀察者模式和發布/訂閱模式的區別

observe nbsp 初步 有時 觀察 觀察者 發生 狀態 發現 在事件總線(EventBus)的架構設計中，用到了發布/訂閱模式，但發現和觀察者模式挺接近，有時容易發生混淆，現試圖分清一下他們的關系。 觀察者模式的角色為觀察者(observer)

觀察者模式和發布訂閱模式（上）

nts 針對 處理 nds script 分享圖片 .data cto 這樣的 觀察者模式 定義：觀察者模式(Observer Pattern)：定義對象間的一種一對多依賴關系，使得每當一個對象狀態發生改變時，其相關依賴對象皆得到通知並被自動更新。 其中有兩個定義需要明確，

Java進階篇設計模式之九----- 解釋器模式和叠代器模式

簡單 目的 java進階 使用 記錄 ace 客戶端 -- pro 前言 在上一篇中我們學習了行為型模式的責任鏈模式(Chain of Responsibility Pattern)和命令模式（Command Pattern）。本篇則來學習下行為型模式的兩個模式， 解釋器模

多線程設計模式：第五篇 - Future模式和兩階段終止模式

捕獲 數量 如果 data counter 分享 就是 main 多次 一，Future模式 ????????Future 的意思是未來，假設有一個方法需要花費很長的時間才能獲取運行結果，那麽與其一直等待，不如先拿到一份最終數據的模板，即 Future 角色，等過一陣子再通

多執行緒設計模式：第三篇 - 生產者-消費者模式和讀寫鎖模式

一，生產者-消費者模式         生產者-消費者模式是比較常見的一種模式，當生產者和消費者都只有一個的時候，這種模式也被稱為 Pipe模式，即管道模式。      &nb

單例設計模式和多例設計模式

設計模式 單例設計模式 餓漢式單例 懶漢式單例 多例設計模式 單例設計模式 JavaSE：工廠+代理+單例 定義：一個類只允許產生一

python學習第二天：命令行模式和Python交互模式

輸出 gin 所在 運行時 執行 分享圖片 enter .com alt 命令行模式 安裝完python開發環境和工具之後，在Windows開始菜單選擇“命令提示符”，就會進入到命令行模式： 或者都可以，然後 點擊enter鍵，彈出下圖中的窗口，即命令行模式，他的提示符

觀察者模式和事件監聽模式的區別

監聽機制 其他 不包含 機制 監聽 多態 場景 觀察者模式 特定 事件監聽模式更像是觀察者模式的進階。 觀察者模式中，‘主題’會在特定邏輯下通知所有‘觀察者’。如果這個通知不包含任何信息，那麽這種實現就是通常的觀察者模式。 如果‘主題’通知‘觀察者’的過程帶有一些<其

做無貨源淘寶店鋪，1688分銷模式和傳統店淘模式該如何選擇？

淘寶規則在不斷的變化，一開始的傳統店鋪，我們自己找貨源，上貨，發貨等一系列的操作都是由我們自己去完成的，這樣一個月下來效果也不是很好；到後來的店淘模式，讓做店淘的我們省時又省力，不用再進貨囤貨，軟體採集淘寶聯盟商品，不用我們一件一件的去上貨，收益也提高了很多，相

微博feed系統的推(push)模式和拉(pull)模式和時間分割槽拉模式架構探討

     sns系統，微博系統都應用到了feed（每條微博或者sns裡的新鮮事等我們稱作feed）系統，不管是twitter.com或者國內的新浪微博，人人網等，在各種技術社群，技術大會上都在分享自己的feed架構，也就是推拉模式（timyang上次也分享了新浪微薄的模式）。

Java進階篇設計模式之九----- 直譯器模式和迭代器模式

前言 在上一篇中我們學習了行為型模式的責任鏈模式(Chain of Responsibility Pattern)和命令模式（Command Pattern）。本篇則來學習下行為型模式的兩個模式， 直譯器模式(Interpreter Pattern)和迭代器模式

C++設計模式——工廠方法模式和抽象工廠方法模式

一、工廠方法模式 上面的簡單工廠模式的缺點是當新增產品的時候就要去修改工廠的類，這就違反了開放封閉原則，(類、模組、函式)可以擴充套件，但是不可以修改，於是，就出現了工廠方法模式。所謂工廠方法模式，是指定義一個用於建立物件的介面，讓子類決定例項化哪一個類。 #d

比餓漢單例模式和懶漢單例模式更好的靜態內部類單例模式

簡介 單例模式是一種常見的模式，懶漢模式考慮執行緒安全需要在獲取單例的方法新增synchronized關鍵字實現同步程式碼塊，這樣造成了效能損耗；而餓漢模式不能延遲例項化物件，下面是一個靜態內部類單例模式的實現，既保證了執行緒的安全，有能夠延遲載入，也就是在第

JDK的Proxy動態代理模式和CGLIB動態代理模式的區別和共同點

首先我們來談談聯眾代理模式的不同之處：《1》代理類不同點：（1）Proxy的代理類的建立是通過工具類或者工廠類自動建立的，   我們只需要呼叫Proxy.newProxyInstance(Loader,interfaces,h);正確的傳入相應的引數，就可以得到餓哦們想要的目

epoll關於ET、LT模式和socket非阻塞模式的幾個總結

epoll的ET和LT模式 LT水平觸發是預設的模式，只要緩衝區有訊息就會觸發，如果這次事件沒有被處理，那麼下一次呼叫epoll_wait的時候，事件仍然會被觸發；ET邊沿觸發只會在第一次有訊息的時候觸發，之後再次呼叫epoll_wait的時候，事件不會被再次觸發了。Linux的ep

理解類建立型模式和物件建立型模式

三年前初看GoF的設計模式時，對於抽象工廠和工廠方法模式的實現都要理解半天，更不用說對概念上的理解了。之後每次翻看此書都能有很多新的體會，像酒一樣越品越醇。一次和同事聊到此時，突然才明白類建立型和物件建立型的區別。 GoF的模式中明確提出，抽象工廠是類建立型模式，工廠方法是物

二十三種設計模式第一天：工廠類模式和單例類模式

從今天開始學習java常見的二十三種設計模式，每天2種，天晴下雨，雷打不動。 第一天：            工廠類模式和單例類模式 首先來看一下java設計中應當遵循的原則： 1、開閉原則（Open Close Principle）   開閉原則主要意思是 對擴充

微博feed系統推拉模式和時間分割槽拉模式架構探討

sns系統，微博系統都應用到了feed（每條微博或者sns裡的新鮮事等我們稱作feed）系統，不管是twitter.com或者國內的新浪微博，人人網等，在各種技術社群，技術大會上都在分享自己的feed架構，也就是推拉模式（timyang上次也分享了新浪微薄的模式）。下面我

ubuntu中文字模式和圖形化介面模式間的切換

從圖形化介面切換到命令列模式，我們可以通過按ALT+CTRL+F1、-----、F6，為什麼是F1、-----、F6，因為在Linux中一般有F1到F6多個命令列字元終端，也就是說我們可以同時開啟最多6個命令列介面。如按ALT+CTRL+F2的介面，命令列有提示tty2