clientHeight/clientWidth 在不同的浏览器上返回不同的值
Posted
技术标签:
【中文标题】clientHeight/clientWidth 在不同的浏览器上返回不同的值【英文标题】：clientHeight/clientWidth returning different values on different browsers 【发布时间】：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 位置文本框、按钮等保留了多少空间...... 【参考方案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
【讨论】：
以上是关于clientHeight/clientWidth 在不同的浏览器上返回不同的值的主要内容，如果未能解决你的问题，请参考以下文章