使用HTML5 DOCTYPE,会出现document.body.clientHeight为0
网上查了一下, 貌似有很多个解决方案。
1. 使用document.documentElement.clientHeight获取。
当使用html5的时候,就会有documentElement在document下。
[img]http://dl2.iteye.com/upload/attachment/0095/6096/453136c3-860d-351a-96a5-77e2bd7faeaa.jpg[/img]
如上图所示 , 左边为chrome,右边为ie。
完全没办法兼容。。
2. 设置DOCTYPE为html4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
经测试该方法可行。 如图
[img]http://dl2.iteye.com/upload/attachment/0095/6102/539577f8-0ab7-3c75-8792-063f443db7b1.jpg[/img]
这种情况只要使用document.body.clientHeight就行了。
但是我想使用html5来作为文档类型。
3. html5-> 设置html,body{height:100%}
在使用html5文档类型的时候, 设置了html body的高度100%之后,两个浏览器就都能获取document.body.clientHeight了。
[img]http://dl2.iteye.com/upload/attachment/0095/6106/a7b070fd-26a0-3bff-8485-55759f4694e8.jpg[/img]
网上查了一下,
[url]http://forums.asp.net/t/1058801.aspx?Why+do+clientHeight+and+offsetHeight+always+return+zero+[/url]
这个网站是这么设置的。
既然有人这么弄,那就先放心的使用了。
网上查了一下, 貌似有很多个解决方案。
1. 使用document.documentElement.clientHeight获取。
当使用html5的时候,就会有documentElement在document下。
[img]http://dl2.iteye.com/upload/attachment/0095/6096/453136c3-860d-351a-96a5-77e2bd7faeaa.jpg[/img]
如上图所示 , 左边为chrome,右边为ie。
完全没办法兼容。。
2. 设置DOCTYPE为html4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
经测试该方法可行。 如图
[img]http://dl2.iteye.com/upload/attachment/0095/6102/539577f8-0ab7-3c75-8792-063f443db7b1.jpg[/img]
这种情况只要使用document.body.clientHeight就行了。
但是我想使用html5来作为文档类型。
3. html5-> 设置html,body{height:100%}
在使用html5文档类型的时候, 设置了html body的高度100%之后,两个浏览器就都能获取document.body.clientHeight了。
[img]http://dl2.iteye.com/upload/attachment/0095/6106/a7b070fd-26a0-3bff-8485-55759f4694e8.jpg[/img]
网上查了一下,
[url]http://forums.asp.net/t/1058801.aspx?Why+do+clientHeight+and+offsetHeight+always+return+zero+[/url]
这个网站是这么设置的。
既然有人这么弄,那就先放心的使用了。