clientHeight returns different values depending on the mode IE8 is in

Question

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.

score 4 · Accepted Answer · answered Jul 19 '10 at 15:56

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

});

When using the jquery function i stile get different values. Any other ideas? In Quirks $('body').width = 1239 $('body').height = 184 document.body.clientWidth = 1231 document.body.clientHeight = 176 In standards $('body').width = 1260 $('body').height = 182 document.body.clientWidth = 1254 document.body.clientHeight = 176 — Ash Burlaczenko, Jul 20 '10 at 08:21

Dexter · Answer 2 · 2011-12-06T16:02:21.057

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>

clientHeight returns different values depending on the mode IE8 is in

2 Answers2

Linked