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

Question

属性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)中保持一致的等效属性？

Answer 1

Paul A对于存在差异的原因是正确的,但Ngm提供的解决方案是错误的(在JQuery意义上).

jquery(1.3)中的clientHeight和clientWidth相当于

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

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

Answer 2

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

&@Ngm:jQuery` .height()`和`.width()`不等同于`clientHeight`和`clientWidth`,因为它们不包含填充.另一方面,`.innerHeight()`没有考虑滚动条......**HTML DOM`weboutHeight`没有jQuery等价物.** (17认同)
什么是jQuery等效于clientWidth和clientHeight？ (10认同)
jQuery $(document).height $(document).width也返回不同浏览器的变量值 (9认同)

Answer 3

该体元素将可用的宽度,这通常是你的浏览器窗口.因此,由于浏览器镀铬边框,滚动条,垂直空间被菜单占用等等,它将是跨浏览器的不同尺寸...

高度也变化的事实也告诉我你通过css 将body/html高度设置为100%,因为高度通常取决于体内的元素.

除非您通过css或它的样式属性将body元素的宽度设置为固定值,否则它的尺寸通常会改变跨浏览器/版本,甚至可能取决于您为浏览器安装的插件.在这种情况下,常量值更像是规则的例外......

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

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