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

Question

我正在尝试计算 iFrame 的高度，但不明白为什么

document.body.offsetHeight + document.body.bottomMargin 

不等于

document.documentElement.offsetHeight

当所有其他边距设置为零且底部边距的值低于 16 像素时。

一旦底部边距超过 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');
}