先给一个初始版吧,后期有新的发现在修改补充:
浏览器 |
offsetHeight |
clientHeight |
scrollHeight |
IE(6) |
H+S+P+B |
H+P-S |
H+P+M+P(own) |
IE ( 7 ) |
H+S+P+B |
H+P-S |
H+P+M+P(own) |
IE ( 8 ) |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
IE ( 9 ) |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
IE ( 10) |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
IE ( 11) |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
Chrome |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
FireFox |
H+S+P+B |
H+P-S |
H+P+M+Pt(own) |
说明:
* H(height) | S(scrollBar) | P(padding) | B(border) | M(margin)
* (own) 表示DOM对象自身。
* offsetHeight:DOM对象实际高度。
* clientHeight:DOM对象内容的高度(间距也算是内容)。
* scrollHeight:获得滚动内容的高度。
但在IE中,这个滚动的内容,还会加上DOM元素自身的间距,并且还有因为滚动内容是否为空,或者是滚动内容高度小于DOM对象自身的高度从而在IE的各个版本中都会有所不同,下面是具体的说明:
------------------------------------------
IE 7- 以下:
DOM对象自身的总高度 = H+P。
IE8+、Chrome、Firefox 中:
DOM对象自身的总高度 = H+P-S。
------------------------------------------
内容总高度 = H+P+M;
ie6 中的区别:
如果内容总高度小于19px或者DOM对象内部为空,那么scrollHeight的值为19,这是因为在IE6中,元素的最小高度是19px;
如果DOM对象内部有一个空的没有任何内容与样式的元素,那么scrollHeight的值,就是DOM对象本身的高度+间距。
Ie7中的区别:
如果内容总高度小于19px或者DOM对象内部为空,那么scrollHeight的值为19,这是因为在IE6中,元素的最小高度是19px;
IE8+、Chrome、Firefox:中的区别:
如果DOM对象的内容为空,或者是内容的高度小于DOM对象自身的高度,那么scrollHeight的值便是DOM对象自身的总高度 。
如果内容的总高度大于DOM对象自身的总高度,那么scrollHeight的值,则是 DOM对象内容的总高度 + DOM对象的上间距。
最后补充一点的是以上说的offsetHeight、clientHeight、scrollHeight也适应于offsetWidth、clinetWidth、scrollWidth。