属性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
FireFox:
document.body.clientHeight : 620
document.body.clientWidth : 1152
为什么存在这种差异?
在不使用jQuery的情况下,是否存在在不同浏览器(IE8,IE7,Firefox)中保持一致的等效属性?
答案 0 :(得分:23)
Paul A对于存在差异的原因是正确的,但Ngm提供的解决方案是错误的(在JQuery意义上)。
jquery(1.3)中clientHeight和clientWidth的等价物是
$(window).width(), $(window).height()
答案 1 :(得分:5)
这与浏览器的盒子模型有关。使用jQuery或其他JavaScript抽象库来规范化DOM模型。
答案 2 :(得分:5)
body 元素采用可用宽度,通常是您的浏览器视口。 因此,由于浏览器镀铬边框,滚动条,垂直空间被菜单占用等等,它将是跨浏览器的不同尺寸......
高度也变化的事实也告诉我你通过css将 body / html 高度设置为100%,因为高度通常取决于 body ..
除非你通过css或它的样式属性将 body 元素的宽度设置为固定值,否则它的尺寸通常会改变跨浏览器/版本,甚至可能取决于你的插件为浏览器安装。在这种情况下,常量值更像是规则的例外......
当您在不采用浏览器视口的自动宽度的其他元素上调用.clientWidth时,它将始终返回元素'width'+'padding'。因此,宽度为200且填充为20的div将具有clientWidth = 240(左右填充20个)。
然而,主要原因是,为什么会调用clientWidth,这正是由于预期的结果可能存在差异。如果你知道你将获得一个恒定的宽度并且值已知,那么调用clientWidth是多余的......
答案 3 :(得分:3)
jQuery中的offsetHeight和offsetWidth相当于 $(window).width(),$(window).height() 它不是clientHeight和clientWidth
答案 4 :(得分:1)
Element.clientWidth
& Element.clientHeight
除了任何适用的填充之外,还返回该元素内容的高度/宽度。
这些的jQuery实现是:
$(target).outerWidth()
& $(target).outerHeight()
.clientWidth
& .clientHeight
包含在CSSOM视图模块规范中,该规范目前处于工作草案阶段。虽然现代浏览器具有此规范的一致实现,但为了确保跨传统平台的一致性能,仍应使用jQuery实现。
其他信息:
答案 5 :(得分:1)
我用clientHeight修复我的问题是使用控件firstChild的clientHight。我使用IE 11从数据库中打印标签,在IE 8中工作的clientHeight在IE 11中返回0的高度。我在该控件中找到了一个列为firstChild的属性,如果clientHeight实际上有一个属性我正在寻找的高度。因此,如果您的控件返回的clientSize为0,请查看其firstChild的属性。它帮助了我......
答案 6 :(得分:0)
这可能是由IE的盒子模型错误引起的。要解决此问题,您可以使用Box Model Hack。
答案 7 :(得分:0)
我遇到了类似的问题 - firefox返回了obj.clientHeight的正确值,但是没有 - 它返回0.我将它更改为obj.offsetHeight并且它有效。似乎有一些状态,即对于客户端高度而言 - 这使得它无论如何......
答案 8 :(得分:0)