Question

在javascript函数中，我使用document.body.clientHeight来获取正文的高度。现在，根据IE8所处的模式（即怪癖或标准），值不同。

实施例在怪癖中，document.body.clientHeight = 800px 在标准中，document.body.clientHeight = 650px

希望我有道理。

请帮忙。

Answer 1

Quirks模式和Standards模式返回值不一致。由于您将其标记为jQuery，只需使用

$('body').height()或$(window).height()取决于您的需求...它会在内部对其进行修复，因此您无需输入此内容：

jQuery.each([ "Height", "Width" ], function( i, name ) {

    var type = name.toLowerCase();

    // innerHeight and innerWidth
    jQuery.fn["inner" + name] = function() {
        return this[0] ?
            jQuery.css( this[0], type, false, "padding" ) :
            null;
    };

    // outerHeight and outerWidth
    jQuery.fn["outer" + name] = function( margin ) {
        return this[0] ?
            jQuery.css( this[0], type, false, margin ? "margin" : "border" ) :
            null;
    };

    jQuery.fn[ type ] = function( size ) {
        // Get window width or height
        var elem = this[0];
        if ( !elem ) {
            return size == null ? null : this;
        }

        if ( jQuery.isFunction( size ) ) {
            return this.each(function( i ) {
                var self = jQuery( this );
                self[ type ]( size.call( this, i, self[ type ]() ) );
            });
        }

        return ("scrollTo" in elem && elem.document) ? // does it walk and quack like a window?
            // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
            elem.document.compatMode === "CSS1Compat" && elem.document.documentElement[ "client" + name ] ||
            elem.document.body[ "client" + name ] :

            // Get document width or height
            (elem.nodeType === 9) ? // is it a document
                // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
                Math.max(
                    elem.documentElement["client" + name],
                    elem.body["scroll" + name], elem.documentElement["scroll" + name],
                    elem.body["offset" + name], elem.documentElement["offset" + name]
                ) :

                // Get or set width or height on the element
                size === undefined ?
                    // Get width or height on the element
                    jQuery.css( elem, type ) :

                    // Set the width or height on the element (default to pixels if value is unitless)
                    this.css( type, typeof size === "string" ? size : size + "px" );
    };

});

Answer 2

IE实际上在两种模式下都会返回clientHeight和clientWidth的正确值 - 但它会以不同方式呈现框的高度/宽度。有关此演示，请参阅Quirks Mode。

在怪癖模式下，IE渲染填充的宽度/高度和框内宽度/高度的边框 - 在标准模式下，IE正确呈现填充和边框以及框的声明宽度。

确保一致性的最佳方法是通过在文件的开头包含此定义来强制IE进入标准模式：

<!doctype html>

clientHeight根据IE8所处的模式返回不同的值

2 个答案: