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?

Solution 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.

Solution 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()

Solution 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...

Solution 4

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

Solution 5

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

View more solutions