clientWidth和clientHeight总是返回零为ie7

Question

我不知道为什么，但clientWidth和clientHeight总是返回零，当我从IE9运行IE9 compat查看，或IE7。它适用于其他一切。 非常简单的代码片段有问题的（所以你可以尝试它太）： 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);​ 

这总是弹出一个警告“0×0”，当我在IE7或IE9比较运行适应性模式。

任何帮助或解释真的不胜感激。谢谢！

Answer 1

我测试了你的代码，以下是观察结果。如果你没有为“aaa”元素应用任何样式，IE将不会计算任何宽度和高度。所以JS只给你0.但是，如果你从IE开发工具栏看盒子模型，你会看到一些价值。所以如果你使用float:left来指定那个元素，JS会返回一个值，这是正确的，所有的浏览器都会给你相同的输出。

由于您使用的是jQuery，为什么不使用width()或outerWidth()或innerWidth()。这些方法适用于所有浏览器。只需使用width()，您将看到非常大的宽度，因为您没有应用任何样式。在IE中，如果元素没有浮点值，它会得到它的父宽度。在你的情况下，它是窗口宽度。

所以，如果我修改代码以获得正确的宽度和高度应该是：

HTML：

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

JS：

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

请让我知道如果你需要进一步澄清... 欢呼！

Answer 2

这是因为IE中的“hasLayout”属性，你的div本身没有“布局”。欲了解更多信息，请参阅http://www.satzansatz.de/cssd/onhavinglayout.html

幸运的是，你可以触发一个元素都有布局，这就是为什么添加“浮动：左”的风格在上面的回答工作。还有其他触发器可以使用，但不会更改页面。这一次给了我正确的价值观为clientWidth和clientHeight：

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

文章说，设置“最小宽度：0”也应该工作，但它确实不适合我。设置“display：inline-block”工作正常，但这可能会改变你的页面。您可以在CSS中设置这些触发器，以便根本不需要更改HTML。

Answer 3

尝试offsetHeight Internet Explorer的属性。