Question

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

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

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

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

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根本不需要更改。

Answer 2

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

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

如果您需要更多说明，请与我们联系...... 干杯！

Answer 3

尝试使用Internet Explorer的 offsetHeight 属性。

clientWidth和clientHeight总是为ie7返回零

3 个答案: