clientHeight/clientWidth returning different values on different browsers

Question

Properties document.body.clientHeight and document.body.clientWidth return different values on IE7, IE8 and Firefox:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Why does this discrepancy exist?
Are there any equivalent properties that are consistent across different browsers (IE8, IE7, Firefox) without using jQuery?

Answer 1

This has to do with the browser's box model. Use something like jQuery or another JavaScript abstraction library to normalize the DOM model.

Answer 2

Paul A is right about why the discrepancy exists but the solution offered by Ngm is wrong (in the sense of JQuery).

The equivalent of clientHeight and clientWidth in jquery (1.3) is

$(window).width(), $(window).height()

Answer 3

The body element takes the available width, which is usually your browser viewport. As such, it will be different dimensions cross browser due to browser chrome borders, scrollbars, vertical space being take up by menus and whatnot...

The fact that the heights also vary, also tells me you set the body/html height to 100% through css since the height is usually dependant on elements inside the body..

Unless you set the width of the body element to a fixed value through css or it's style property, it's dimensions will as a rule, always vary cross browsers/versions and perhaps even depending on plugins you installed for the browser. Constant values in such a case is more an exception to the rule...

When you invoke .clientWidth on other elements that do not take the automatic width of the browser viewport, it will always return the elements 'width' + 'padding'. So a div with width 200 and a padding of 20 will have clientWidth = 240 (20 padding left and right).

The main reason however, why one would invoke clientWidth, is exactly due to possible expected discrepancies in results. If you know you will get a constant width and the value is known, then invoking clientWidth is redundant...

Answer 4

The equivalent of offsetHeight and offsetWidth in jQuery is $(window).width(), $(window).height() It's not the clientHeight and clientWidth

Answer 5

Element.clientWidth & Element.clientHeight return the height/width of that element's content in addition any applicable padding.

The jQuery implementation of these are: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight are included in the CSSOM View Module specification which is currently in the working draft stage. While modern browsers have a consistent implementation of this specification, to insure consistent performance across legacy platforms, the jQuery implementation should still be used.

Additional information:

• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientHeight

Answer 6

What I did to fix my issue with clientHeight is to use the clientHight of the controls firstChild. I use IE 11 to print labels from a database and the clientHeight that worked in IE 8 was returning the height of 0 in IE 11. I found a property in that control that was listed as firstChild and that had a property if clientHeight and actually had the height I was looking for. So if your control is returning a clientSize of 0 take a look at the property of its firstChild. It helped me...

Answer 7

i had a similar problem - firefox returned the correct value of obj.clientHeight but ie did not- it returned 0. I changed it to obj.offsetHeight and it worked. Seems there is some state that ie has for clientheight - that makes it iffy...

Answer 8

It may be caused by IE's box model bug. To fix this, you can use the Box Model Hack.

Answer 9

Some more info for Browser window : http://www.w3schools.com/js/js_window.asp?output=print