CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8standards
Ash Burlaczenko
Ash Burlaczenko

Reputation: 25435

clientHeight returns different values depending on the mode IE8 is in

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.

Upvotes: 1

Views: 5261

Answers (2)

Dexter
Dexter

Reputation: 18452

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>

Upvotes: 4

meder omuraliev
meder omuraliev

Reputation: 186562

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

});

Upvotes: 4

Related Questions