对于ie7，clientWidth和clientHeight总是返回零

clientWidth and clientHeight always returns zero for ie7

本文关键字：返回 clientHeight ie7 clientWidth 对于      更新时间：2023-09-26

我不知道为什么，但当我在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"的警报。

如有任何帮助或解释，我们将不胜感激。谢谢

之所以会发生这种情况，是因为IE中有"hasLayout"属性，而您的div本身并没有"have layout"。有关详细信息，请参阅http://www.satzansatz.de/cssd/onhavinglayout.html

幸运的是，您可以触发一个元素具有布局，这就是为什么添加"float:left"样式在上面的答案中有效。你也可以使用其他触发器，尽管它们不会改变页面。这个给了我正确的clientWidth和clientHeight:值

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

这篇文章说，设置"最小宽度：0"也应该有效，但对我来说没有。设置"显示：内联块"还可以，但这可能会改变你的页面。您可以在CSS中设置这些触发器，这样HTML就根本不需要更改。

我测试了您的代码，以下是观察结果。

在IE中（糟透了！），如果你没有为"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);

如果你需要更多的澄清，请告诉我。。。干杯

尝试offsetHeightinternet explorer的属性。

相关文章：