在網(wǎng)上搜了一下，結(jié)論非常籠統(tǒng)，講IE從不講版本，因此自己做了測試并上傳結(jié)論。以下結(jié)論皆是在標(biāo)準(zhǔn)模式下測試通過的，沒有測試quirk模式。

clientHeight

大部分瀏覽器對 clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，即然是指可看到內(nèi)容的區(qū)域，滾動條不算在內(nèi)。但要注意padding是算在內(nèi)。其計(jì)算方式為clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

offsetHeight
在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滾動條 + 邊框。

scrollHeight
scrollHeight是元素的padding加元素內(nèi)容的高度。這個高度與滾動條無關(guān)，是內(nèi)容的實(shí)際高度。

計(jì)算方式 ：scrollHeight = topPadding + bottomPadding + 內(nèi)容margix box的高度。

在瀏覽器中的區(qū)別在于：

IE6、IE7 認(rèn)為scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于clientHeight。

FF、Chrome 認(rèn)為scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是clientHeight。

注： 以上都是對于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各個瀏覽器中的計(jì)算方式又不同。在所有的瀏覽器中，如果你想獲取整個視窗的高度，你得用documentElement.clientHeight，因?yàn)閎ody.clientHeight是由它的內(nèi)容決定的。 關(guān)于body和documentElement的這些屬性，則完全是另外一回事：

FF19

在body上設(shè)置overflow:scroll就是設(shè)置瀏覽器的滾動條，導(dǎo)致body.clientHeight永遠(yuǎn)都等于body.scrollHeight。

body
clientHeight：body.padding+ body.height(css設(shè)置或內(nèi)容撐的);

offsetHeight：clientHeight+ body.border;

scrollHeight== clientHeight。

documentElement
clientHeight= window視窗高度 -scrollbar.width。

offsetHeight= body.offsetHeight  + body.margin。

scrollHeight= 內(nèi)容的高度（與body的height樣式無關(guān)），但最小值是documentElement.clientHeight。

元素上
offsetHeight= padding + border + height。

clientHeight= padding + height - scrollbar.width。

scrollHeight>= clientHeight

從結(jié)果分析，F(xiàn)F認(rèn)為scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window視窗原點(diǎn)的距離 或 到offsetParent的borderbox頂部的距離。

Chrome
body
clientHeight= body.padding + body.height（css設(shè)置或內(nèi)容撐大）；

offsetHeight = body.clientHeight + body.border；

scrollHeight= body.padding + 內(nèi)容的高度(與height樣式無關(guān))，但最小值是documentElement.clientHeight。

documentElement
clientHeight= window視窗高度 – 滾動條高度。

offsetHeight  = body.offsetHeight + body.margin;

scrollHeight  = 內(nèi)容的高度（與body上的height無關(guān)），但最小值是documentElement.offsetHeight。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

Safari 5
body
clientHeight= body.padding + body.height（CSS或內(nèi)容撐的）;

offsetHeight= clientHeight + border;

scrollHeight= body.padding + 內(nèi)容的高度(與height樣式無關(guān))，但最小值是documentElement.clientHeight。

documentElement
clientHeight = window窗口大小 – 滾動條大小

offsetHeight = body.offsetHeight + body.margin

scrollHeight= 內(nèi)容的高度（與body上的height無關(guān)），但最小值是documentElement.offsetHeight。

IE8
在IE8下，滾動條的大小是17個像素。

body
clientHeight= body.padding + body.height(css設(shè)置或內(nèi)容撐大)

offsetHeight = clientHeight + body.border

scrollHeight =內(nèi)容的高度（與body上的height無關(guān)），但最小值是clientHeight。

documentElement
clientHeight = 窗口大?。ǔL動條后）

offsetHeight = clientHeight + 滾動條大小 + body.border

scrollHeight=內(nèi)容的高度（與body上的height無關(guān)），但最小值是body.offsetHeight+ margin。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

從結(jié)果分析，F(xiàn)F認(rèn)為scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到畫布原點(diǎn)的距離 或 到offsetParent的borderbox頂部的距離。

IE7
在IE7中，body上設(shè)置的滾動條并不是窗口的滾動條，這個需要注意。

body
clientHeight= body.padding + height(css設(shè)置或內(nèi)容撐大)– body上的滾動條。

offsetHeight= clientHeight + 滾動條的大小+body.border。

scrollHeight=   內(nèi)容的高度（與body上的height無關(guān)）。

documentElement
clientHeight = window視窗大?。ㄅc滾動條的有無無關(guān)）

offsetHeight = clientHeight。

scrollHeight = body.offsetHeight + border.margin

元素
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight = padding + 內(nèi)容marginbox的高度

從結(jié)果分析，IE7認(rèn)為scrollHeight可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器（不是offsetParent）的borderbox左上角的距離。

IE6
在IE6中，與IE7類似， body上設(shè)置的滾動條并不是窗口的滾動條。

body
clientHeight = body.padding + body.height

offsetHeight = body.clientHeight + body.border + body上滾動條大小。

scrollHeight =內(nèi)容的高度（與body上的height無關(guān)）。

documentElement
在IE6中，與IE7類似，雖然body上設(shè)置的滾動條并不是窗口的滾動條，但它的clientHeight和offsetHeight還算與其它瀏覽器想統(tǒng)一。

clientHeight = 窗口大?。ǔゴ翱跐L動條大小后）

offsetHeight =clientHeight + body.border

scrollHeight = body.offsetHeight + body.margin

元素
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight = padding + 內(nèi)容margin box的高度

從結(jié)果分析，IE6認(rèn)為scrollHeight可以小于clientHeight。

同理

clientWidth、offsetWidth 和scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

最新評論