clientHeight/clientWidth 在不同的浏览器上返回不同的值答案

【问题标题】：clientHeight/clientWidth returning different values on different browsersclientHeight/clientWidth 在不同的浏览器上返回不同的值
【发布时间】：2010-10-24 10:31:13
【问题描述】：

属性 document.body.clientHeight 和 document.body.clientWidth 在 IE7、IE8 和 Firefox 上返回不同的值：

IE 8：

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7：

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

火狐：

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

为什么会存在这种差异？
在不使用 jQuery 的情况下，是否存在跨不同浏览器（IE8、IE7、Firefox）一致的等效属性？

【问题讨论】：

您实际上在不同浏览器中截屏并测量了clientHeight？ Betcha 数字是正确的，测量可用空间，不同的浏览器有不同的可用空间取决于从 url 位置文本框、按钮等保留了多少空间......

标签： javascript css firefox internet-explorer-8 internet-explorer-7

【解决方案1】：

Paul A 关于为什么存在差异的说法是正确的，但 Ngm 提供的解决方案是错误的（就 JQuery 而言）。

jquery(1.3)中clientHeight和clientWidth的等价物是

$(window).width(), $(window).height()

【讨论】：

.height() 不包括元素填充。如果有人会使用.innerHeight() 它仍然不行，因为当元素可滚动时它不考虑滚动条。 clientHeight 是内部高度，但只有可见高度（没有滚动条）。
我认为这不是真的。 $(window).height() 和 document.documentElement.clientHeight 通常在不同的浏览器中返回完全不同的值。

【解决方案2】：

这与浏览器的盒子模型有关。使用 jQuery 或其他 JavaScript 抽象库之类的东西来规范化 DOM 模型。

【讨论】：

什么是 jQuery 等价于 clientWidth 和 clientHeight？
jQuery $(document).height $(document).width 也在不同的浏览器上返回变量值
& @Ngm: jQuery .height() 和 .width() 不等同于 clientHeight 和 clientWidth，因为它们不包括填充。另一方面，.innerHeight() 不考虑滚动条... HTML DOM clientHeight 没有 jQuery 等效项。
@RobertKoritnik arajek 在下面的答案中指出了 jQuery 等价物。

【解决方案3】：

body 元素采用可用宽度，通常是您的浏览器视口。因此，由于浏览器 chrome 边框、滚动条、菜单占用的垂直空间等等，跨浏览器的尺寸会有所不同......

高度也不同的事实也告诉我你通过css将body/html高度设置为100%，因为高度通常取决于body中的元素>..

除非您通过 css 或它的 style 属性将 body 元素的宽度设置为固定值，否则它的尺寸通常会因浏览器/版本而异，甚至可能取决于您使用的插件为浏览器安装。这种情况下的常量值更像是规则的一个例外......

当您在其他不采用浏览器视口自动宽度的元素上调用 .clientWidth 时，它将始终返回元素 'width' + 'padding'。因此，宽度为 200 且填充为 20 的 div 将具有 clientWidth = 240（左右填充 20）。

然而，调用 clientWidth 的主要原因正是由于结果可能存在预期差异。如果你知道你会得到一个恒定的宽度并且值是已知的，那么调用 clientWidth 是多余的......

【讨论】：

【解决方案4】：

jQuery 中 offsetHeight 和 offsetWidth 的等价物是 $(window).width(), $(window).height() 不是clientHeight和clientWidth

【讨论】：

【解决方案5】：

Element.clientWidth & Element.clientHeight 除了任何适用的填充外，还返回该元素内容的高度/宽度。

这些的 jQuery 实现是： $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight 包含在 CSSOM 视图模块规范中，该规范目前处于工作草案阶段。尽管现代浏览器对此规范有一致的实现，但为了确保跨旧平台的一致性能，仍应使用 jQuery 实现。

附加信息：

https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientWidth
https://developer.mozilla[dot]org/en-US/docs/Web/API/Element.clientHeight

【讨论】：

【解决方案6】：

解决我的 clientHeight 问题的方法是使用控件 firstChild 的 clientHight。我使用 IE 11 打印数据库中的标签，并且在 IE 8 中工作的 clientHeight 在 IE 11 中返回 0 的高度。我在该控件中找到了一个属性，该属性被列为 firstChild 并且如果 clientHeight 具有属性并且实际上有我正在寻找的高度。因此，如果您的控件返回的 clientSize 为 0，请查看其 firstChild 的属性。它帮助了我...

【讨论】：

【解决方案7】：

我遇到了类似的问题-firefox 返回了正确的 obj.clientHeight 值，但没有返回 0。我将其更改为 obj.offsetHeight 并且可以正常工作。似乎 ie 对 clientheight 有一些状态 - 这使得它变得不确定......

【讨论】：

【解决方案8】：

可能是 IE 的 box model bug 造成的。要解决此问题，您可以使用Box Model Hack。

【讨论】：

【解决方案9】：

浏览器窗口的更多信息： http://www.w3schools.com/js/js_window.asp?output=print

【讨论】：