clientWidth和clientHeight总是为ie7返回零

Question

我不知道为什么,但是当我在IE9的compat View或IE7中从IE运行时,clientWidth和clientHeight总是返回零.它适用于其他一切.非常简单的代码片段有问题(所以你也可以尝试):http: //jsfiddle.net/nz2DA/

上面找到的代码段如下...我有一个包含以下HTML代码段的页面:

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

而我的javascript测试clientWidth和clientHeight函数如下:

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

当我在IE7或IE9兼容模式下运行时,这总是会弹出"0 X 0"的警报.

任何帮助或解释将非常感激.谢谢!

Answer 1

这是因为IE中的"hasLayout"属性,并且你自己的div没有"布局".有关更多信息,请参阅http://www.satzansatz.de/cssd/onhavinglayout.html

幸运的是,您可以触发元素进行布局,这就是为什么在上面的答案中添加"float:left"样式.您也可以使用其他触发器,但不会更改页面.这个给了我clientWidth和clientHeight的正确值:

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

文章说,设置"min-width:0"也应该有用,但它不适合我.设置"display:inline-block"工作正常,但这可能会改变您的页面.您可以在CSS中设置这些触发器,以便HTML根本不需要更改.