javascript - clientWidth and clientHeight always returns zero for ie7 - Stack Overflow

admin管理员组

文章数量:1323707

I have no idea why, but clientWidth and clientHeight are always returning zero when I run this from IE in IE9 pat View, or IE7. It works for everything else. Very simple code snippet with problem (so that you can try it too): /

The code snippet found above is as follows... I have a page containing the following HTML snippet:

<div id='aaa'>aaaaaa</div>​

And my javascript to test the clientWidth and clientHeight functions are as follows:

var el = $('#aaa')[0];
alert('Client width and height: '+ el.clientWidth + ' X ' + el.clientHeight);​

This always pops up an alert with "0 X 0" when I run in IE7 or IE9 Compatibility mode.

Any help or explanation would really be appreciated. Thanks!

I have no idea why, but clientWidth and clientHeight are always returning zero when I run this from IE in IE9 pat View, or IE7. It works for everything else. Very simple code snippet with problem (so that you can try it too): http://jsfiddle/nz2DA/

The code snippet found above is as follows... I have a page containing the following HTML snippet:

<div id='aaa'>aaaaaa</div>​

And my javascript to test the clientWidth and clientHeight functions are as follows:

var el = $('#aaa')[0];
alert('Client width and height: '+ el.clientWidth + ' X ' + el.clientHeight);​

This always pops up an alert with "0 X 0" when I run in IE7 or IE9 Compatibility mode.

Any help or explanation would really be appreciated. Thanks!

• javascript
• html
• internet-explorer-7
• cross-browser

Share Improve this question Follow edited Aug 2, 2012 at 6:16 Mark Whitfeld asked Aug 1, 2012 at 15:24 Mark WhitfeldMark Whitfeld 6,85844 gold badges3838 silver badges3232 bronze badges 2

• So, I found a work around. I can just use the offsetWidth and offsetHeight to get these dimensions. I didn't post this as a solution because it isn't really a solution, but rather a work around. – Mark Whitfeld Commented Aug 3, 2012 at 9:53
• Waiting for the $(document).ready(function(){....}) doesn't work either. I am also aware of the jquery functions for returning height and width, but I would like to know if there is a fix for these specific properties. – Mark Whitfeld Commented Aug 3, 2012 at 10:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This is happening because of the "hasLayout" property in IE, and your div on its own does not "have layout". For more information, see http://www.satzansatz.de/cssd/onhavinglayout.html

Luckily you can trigger an element to have layout, which is why adding the "float:left" style works in the answer above. There are other triggers you can use too though that don't change the page. This one gives me proper values for clientWidth and clientHeight:

<div id="aaa" style="zoom: 1">aaaaaa</div>

The article says that setting "min-width: 0" should also work but it didn't for me. Setting "display: inline-block" worked OK but that might change your page. You can set these triggers in CSS so that the HTML doesn't need to change at all.

I tested your code and following are the observations.

in IE(sucks!), if you didn't apply any styles for the "aaa" element IE won't calculate any width and height. So JS simply give you 0. But if you look at the box model from the IE dev tool bar you will see some value. So if you use float:left to that element JS will return a value, which is correct and all browsers will give you the same output.

Since you are using jQuery why don't you use width() or outerWidth() or innerWidth(). These methods are generelaized for the every browsers. Simply if you use width() you will see a very large width since you didn't apply any styles. In IE if element doesn't have an float value it gets it's parent width.In your case it's window width.

So if I modify your code to get correct width and height would be:

HTML:

<div id="aaa" style="float:left;">aaaaaa</div>

JS:

var el = $('#aaa')[0];
alert('Client width and height: '+ el.clientWidth + ' X ' + el.clientHeight);

Please let me know if you need more clarifications... cheers!

Try offsetHeight property of internet explorer.

本文标签： javascriptclientWidth and clientHeight always returns zero for ie7Stack Overflow