document.compatMode的CSS1compat
今天再看原始碼的時候發現了CSS1compat的名詞,於是搜尋相關資料。
由於歷史的原因,各個瀏覽器在對頁面的渲染上 存在差異,甚至同一瀏覽器在不同版本中,對頁面的渲染也不同。在W3C標準出臺以前,瀏覽器在對頁面的渲染上沒有統一規範,產生了差異(Quirks mode或者稱為Compatibility Mode);由於W3C標準的推出,瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars mode),這就是二者最簡單的區別。
W3C標準推出以後,瀏覽器都開始採納新標準,但存在一個問題就是如何保證舊的網頁還能繼續瀏覽,在標準出來以前,很多頁面都是根據舊的渲染方法編寫的,如果用的標準來渲染,將導致頁面顯示異常。為保持瀏覽器渲染的相容性,使以前的頁面能夠正常瀏覽,瀏覽器都保留了舊的渲染方法(如:微軟的IE)。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode,兩種渲染方法共存在一個瀏覽器上。
BackCompat:標準相容模式關閉。瀏覽器寬度:document.body.clientWidth;
CSS1Compat:標準相容模式開啟。 瀏覽器寬度:document.documentElement.clientWidth。
在Standars mode中:
元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
在Quirks mode中:
width則是元素的實際寬度,內容寬度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
於是獲取頁面的高度與寬度的程式碼如下:
//返回當前頁面高度 WU.pageHeight = function(){ if(WST.checkBrowser().msie){ return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight; }else{ return self.innerHeight; } }; //返回當前頁面寬度 WU.pageWidth = function(){ if(WST.checkBrowser().msie){ return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth : document.body.clientWidth; }else{ return self.innerWidth; } };