關于clientHeight/clientWidth和scrollHeight/scrollWidth的相關知識點

　　如果要用原生JS來确定元素的大小，在開發中想必都踩過clientHeight/clientWidth以及scrollHeight/scrollWidth的坑。

　　首先是在不包含滾動條的情況下使用clientWidth和scrollWidth以及clientHeight和scrollHeight來确定文檔總高度（也就是基于視口的最小高度時），不同浏覽器有不同的差別。在JavaScript進階程式設計第三版中是這麼描述的：

Firefox中這兩對屬性始終是相等的，但大小是代表文檔内容區域的實際尺寸，非視口尺寸。

Opera、Safari3.1及更高版本、Chrome中這兩個屬性是有差別的，其中scrollWidth和scrollHeight等于視口大小，而clientWidth和clientHeight等于文檔内容大小。

ie中scrollWidth和scrollHeight等于文檔内容大小，而clientWidth和clientHeight等于視口大小。

　　至于視口和文檔實際内容的差別在哪，就是你可以試着把html寫死，比如500px，視口，我親測是ie8以後，ie對這倆屬性也始終是相等的，都等于視口高度，而最新版谷歌依然不相等，且ie8對這倆屬性和offSetHeight屬性有4px的內插補點（ie9就沒了，我将body的margin和padding都是設為了0，不知道問題在哪，可能是因為浏覽器邊緣線的原因）。

　　而且還有一個很有意思的地方就是我發現設定body的height為100%後，再給body設定margin。ie8以前和chrome兩個浏覽器的scrollHeight都将大于clientHeight。Chrome的行為相對好了解，畢竟視口增加了margin比文檔的視覺區域大，是以當然就scrollHeight更大了。但IE的行為。。。。。額。。。。。令人費解。

　　而在有滾動條的情況下，用scrollHeight來取得文檔總高度，clientHeight則是視口高度，分别有不同的應用，這個就無需多說了。

　　此外新屬性innerHeight則是可以永遠擷取視口高度，但是會包含滾動條，說到這ie9包括ie10的offsetHeight和scrollHeight是包括滾動條的，chrome則不包括。

　　

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
           

　　在對樣式進行reset後其實這個問題就不存在了，是以這段代碼的運用并不是很多，僅作為一個小坑了解一下。（當然也許還有其他情況，但我目前沒有遇到。）

　　另外一個更大的坑我想大家都碰到過就是document.documentElement.scrollTop和document.body.scrollTop的運用，原則上按照W3C标準來說，對使用了文檔申明也就是運作在标準模式下的浏覽器在使用時，都應該使用前者，而混雜模式下使用後者。本來相安無事，大家一般都按标準做事，記一個前者用不就行了麼。可Webkit 特立獨行，對于頁面滾動條位置，沒有按照标準處理。是以對于Safari浏覽器和Chrome浏覽器，要取得非0值，還是隻有用後者。這個坑想必坑了無數人。

　　是以為了相容所有浏覽器，最好的寫法是：