要理解這幾個屬性，首先要搞明白body，documentElement的區別
1、body是DOM對象里的body子節點，即<body>標簽
2、documentElement是整個節點樹的跟節點，即<html>標簽
========================body，html的區別==================================
很多人都認為body和html是一樣的，判斷依據就是給body加背景顏色后，整個網頁文檔都會跟着變色。其實這種現象並不能說明body和html節點就是同一個東西，之所以會這樣是由繼承導致的。
我們都知道繼承是指子元素繼承父元素的某些特性，body作為html的子節點，理論上是不存在html繼承body屬性的，但就偏偏存在這樣一個例外，html繼承了body的background屬性，這就導致了給body添加背景顏色整個html跟着變色。（各位同學可以試試給body加個高度，設置背景顏色，然后給html設置另外一個背景顏色，看看效果）
因此新建的網頁在沒內容的情況下，body的高度等於0，隨着內容的增加，body的高度隨之增加
========================結束=======================================
理解了body和html的區別就好理解innerHeight，clientHeight，offsetHeight，各瀏覽器之所以返回的值不同，根本原因就在於計算的基准不同：
1、document.body以body元素為計算基准
2、document.documentElement以html為基准
======================================================
以上都是在標准模式下，在怪異模式下情況又有點不同了：
IE在怪異模型（quick mode）下document.documentElement無法正確取到clietHeight，scrollHeight等值，比如clietHeight=0。可見IE的怪異模型並沒有把html作為盒子模型的一部分，好在現在很少使用怪異模型。（注：如果頁面沒寫DTD或寫的不對，IE6默認使用怪異模型解析頁面）
document.body.scrollHeight和document.documentElement.scrollHeight的區別：
document.body.scrollHeight是body元素的滾動高度，document.documentElement.scrollHeight為頁面的滾動高度（正常情況下應該使用這個），且 document.documentElement.scrollHeight在IE和Firefox下還有點小差異。
IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border寬度
firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
chrome、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。
IE知道11版本才修改成和chorme，ff一致
alert(document.compatMode+"\nwindow.innerHeight："+window.innerHeight+"\n"+"document.documentElement.clientHeight："+document.documentElement.clientHeight+"\n"+"document.documentElement.offsetHeight："+document.documentElement.offsetHeight+"\ndocument.body.offsetHeight："+document.body.offsetHeight+"\ndocument.body.clientHeight："+document.body.clientHeight);