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

【问题标题】：clientHeight returns different values depending on the mode IE8 is inclientHeight 根据 IE8 所处的模式返回不同的值
【发布时间】：2010-07-19 15:50:48
【问题描述】：

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

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

希望我说得通。

请帮忙。

【问题讨论】：

标签： javascript jquery internet-explorer-8 standards

【解决方案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" );
    };

});

【讨论】：

当使用 jquery 函数时，我会得到不同的值。还有其他想法吗？在怪癖中 $('body').width = 1239 $('body').height = 184 document.body.clientWidth = 1231 document.body.clientHeight = 176 在标准中 $('body').width = 1260 $( 'body').height = 182 document.body.clientWidth = 1254 document.body.clientHeight = 176

【解决方案2】：

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

在 quirks 模式下，IE 会在框的宽度/高度内呈现内边距和边框的宽度/高度 - 在标准模式下，IE 会正确呈现除了框的声明宽度之外的内边距和边框。

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

<!doctype html>

【讨论】：