为什么document.body.offsetHeight + document.body.bottomMargin不等于document.documentElement.offsetHeight

我试图锻炼一个iFrame的高度，不能理解为什么

document.body.offsetHeight + document.body.bottomMargin 

不等于

 document.documentElement.offsetHeight 

当所有其他边距设置为零，底部边距的值低于16px。

一旦底部边距大于16px，以上两个值在FireFox中相等，在Chrome中为1px以内。

奇怪的是，这个问题不影响宽度计算。

Answer 1

经过多次挖掘，我想出了这个解决问题。

 function getIFrameHeight(){ function getComputedBodyStyle(prop) { return parseInt( document.defaultView.getComputedStyle(document.body, null), 10 ); } return document.body.offsetHeight + getComputedBodyStyle('marginTop') + getComputedBodyStyle('marginBottom'); } 

和IE8及以下版本的扩展版本。

 function getIFrameHeight(){ function getComputedBodyStyle(prop) { function getPixelValue(value) { var PIXEL = /^\d+(px)?$/i; if (PIXEL.test(value)) { return parseInt(value,base); } var style = el.style.left, runtimeStyle = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft; el.style.left = style; el.runtimeStyle.left = runtimeStyle; return value; } var el = document.body, retVal = 0; if (document.defaultView && document.defaultView.getComputedStyle) { retVal = document.defaultView.getComputedStyle(el, null)[prop]; } else {//IE8 & below retVal = getPixelValue(el.currentStyle[prop]); } return parseInt(retVal,10); } return document.body.offsetHeight + getComputedBodyStyle('marginTop') + getComputedBodyStyle('marginBottom'); }