ie7 的 clientWidth 和 clientHeight 总是返回零答案

【问题标题】：clientWidth and clientHeight always returns zero for ie7ie7 的 clientWidth 和 clientHeight 总是返回零
【发布时间】：2012-07-30 12:56:24
【问题描述】：

我不知道为什么，但是当我在 IE9 兼容视图或 IE7 中从 IE 运行它时，clientWidth 和 clientHeight 总是返回零。它适用于其他一切。非常简单的代码 sn-p 有问题（以便您也可以尝试）： http://jsfiddle.net/nz2DA/

上面找到的代码sn-p如下... 我有一个包含以下 HTML sn-p 的页面：

<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”的警报。

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

【问题讨论】：

所以，我找到了解决办法。我可以使用 offsetWidth 和 offsetHeight 来获得这些尺寸。我没有将此作为解决方案发布，因为它不是真正的解决方案，而是一种解决方法。
等待 $(document).ready(function(){....}) 也不起作用。我也知道用于返回高度和宽度的 jquery 函数，但我想知道是否有针对这些特定属性的修复。

标签： javascript html internet-explorer-7 cross-browser

【解决方案1】：

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

在 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);

如果您需要更多说明，请告诉我... 干杯！

【讨论】：

您好 Roshan，感谢您的观察。我遇到的问题是测量 div，而不是改变它的大小。通过添加 float:left div 改变了它的布局和大小。不幸的是，我没有改变布局的奢侈。不管怎么说，还是要谢谢你！为你 +1
您说：“如果您没有为 'aaa' 元素应用任何样式，IE 将不会计算任何宽度和高度”......我想这就是答案。做不到！啊！在有人找到解决方法之前，我会将其标记为答案。如果存在的话！
正如@Foz 所说，您可以尝试使用zoom:1，尽管我没有检查它。随意尝试，现在让我看看它是否有效......

【解决方案2】：

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

幸运的是，您可以触发元素进行布局，这就是为什么在上面的答案中添加“float:left”样式有效的原因。尽管不会更改页面，但您也可以使用其他触发器。这个给了我正确的 clientWidth 和 clientHeight 值：

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

文章说设置“最小宽度：0”也应该有效，但它不适合我。设置“显示：内联块”工作正常，但这可能会改变您的页面。您可以在 CSS 中设置这些触发器，这样 HTML 就根本不需要更改。

【讨论】：

不错的一个！这行得通。见：jsfiddle.net/nz2DA/1 因为@Roshan.Ind 先给出了答案。我会留下他的答案，但 +1 为你提供解决方案！谢谢

【解决方案3】：

试试 Internet Explorer 的 offsetHeight 属性。

【讨论】：