Question

我正在尝试锻炼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');
}

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

1 个答案: