clientHeight/clientWidth 在不同浏览器上返回不同的值
https://stackoverflow.com/questions/833699
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
特性 document.body.clientHeight 和 document.body.clientWidth 在 IE7、IE8 和 Firefox 上返回不同的值：
IE 8：
document.body.clientHeight : 704
document.body.clientWidth : 1148
浏览器7：
document.body.clientHeight : 704
document.body.clientWidth : 1132
火狐：
document.body.clientHeight : 620
document.body.clientWidth : 1152
为什么会存在这种差异呢？
是否有任何等效属性在不同浏览器（IE8、IE7、Firefox）中保持一致而无需使用 jQuery？
解决方案
这与浏览器的盒子模型有关。使用jQuery或其他JavaScript抽象库来规范化DOM模型。
其他提示
Paul A对于存在差异的原因是正确的，但Ngm提供的解决方案是错误的（在JQuery意义上）。
jquery（1.3）中clientHeight和clientWidth的等价物是
$(window).width(), $(window).height()
body 元素采用可用宽度，通常是您的浏览器视口。 因此，由于浏览器镀铬边框，滚动条，垂直空间被菜单占用等等，它将是跨浏览器的不同尺寸......
高度也变化的事实也告诉我你通过css将 body / html 高度设置为100％，因为高度通常取决于 body ..
除非你通过css或它的样式属性将 body 元素的宽度设置为固定值，否则它的尺寸通常会改变跨浏览器/版本，甚至可能取决于你的插件为浏览器安装。在这种情况下，常量值更像是规则的例外......
当您在不采用浏览器视口的自动宽度的其他元素上调用.clientWidth时，它将始终返回元素'width'+'padding'。因此，宽度为200且填充为20的div将具有clientWidth = 240（左右填充20个）。
然而，主要原因是，为什么会调用clientWidth，这正是由于预期的结果可能存在差异。如果你知道你将获得一个恒定的宽度并且值已知，那么调用clientWidth是多余的......
jQuery中的offsetHeight和offsetWidth相当于 $（window）.width（），$（window）.height（） 它不是clientHeight和clientWidth
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
我用clientHeight修复我的问题是使用控件firstChild的clientHight。我使用IE 11从数据库中打印标签，在IE 8中工作的clientHeight在IE 11中返回0的高度。我在该控件中找到了一个列为firstChild的属性，如果clientHeight实际上有一个属性我正在寻找的高度。因此，如果您的控件返回的clientSize为0，请查看其firstChild的属性。它帮助了我......
我遇到了类似的问题 - firefox返回了obj.clientHeight的正确值，但是没有 - 它返回0.我将它更改为obj.offsetHeight并且它有效。似乎有一些状态，即对于客户端高度而言 - 这使得它无论如何......
这可能是由IE的盒子模型错误引起的。要解决此问题，您可以使用 Box Model Hack 。
