admin管理员组

文章数量:1327661

In a javascript function I use document.body.clientHeight to get the height of the body. Now depending on the mode IE8 is in (i.e quirks or standard), the value is different.

Example In quirks, document.body.clientHeight = 800px In standard, document.body.clientHeight = 650px

Hope I've made sense.

Please help.

In a javascript function I use document.body.clientHeight to get the height of the body. Now depending on the mode IE8 is in (i.e quirks or standard), the value is different.

Example In quirks, document.body.clientHeight = 800px In standard, document.body.clientHeight = 650px

Hope I've made sense.

Please help.

Share Improve this question edited May 4, 2011 at 15:18 Jordan Evens 4151 gold badge4 silver badges14 bronze badges asked Jul 19, 2010 at 15:50 Ash BurlaczenkoAsh Burlaczenko 25.5k16 gold badges69 silver badges101 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

Quirks mode and Standards mode return value is inconsistent. Since you tagged it as jQuery, just use

$('body').height() or $(window).height() depending on what you need... it fixes it internally so you don't have to type this:

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.patMode === "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" );
    };

});

IE actually returns the correct values for clientHeight and clientWidth in both modes - but it's rendering the height / width of the boxes differently. See Quirks Mode for a demo of this.

In quirks mode, IE renders the width / height of padding and borders within the width / height of the box - in standards mode IE correctly renders the padding and borders in addition to the declared width of the box.

The best way to ensure consistency is to force IE into standards mode, by including this definition at the start of your file:

<!doctype html>

本文标签: javascriptclientHeight returns different values depending on the mode IE8 is inStack Overflow