关于“滚动条是body元素，不是html元素”的更多讨论

最新推荐文章于 2022-11-29 08:51:00 发布

guaguapi_ndsc

最新推荐文章于 2022-11-29 08:51:00 发布

阅读量1.2k

点赞数 2

分类专栏： Web前端文章标签： html xhtml scroll ie webkit 浏览器

本文链接：https://blog.csdn.net/guaguapi_ndsc/article/details/7963157

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引言

在解决IE6不兼容position:fixed问题的过程，看到网上有资料说“滚动条是body元素，不是html元素”，初始信以为真，后来在实践过程发现并不出现预期效果，随后对此问题进行了实验。

“滚动条是body元素，不是html元素”的推翻

1、实验设计方案一

假如“滚动条是body元素，不是html元素”成立，那么对html设置overflow:hidden,还是能看到滚动条。

实验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style>
 html{
 	overflow:hidden;
 }
 </style>
 </head>
 
 <body>
 假如“滚动条是body元素，不是html元素”成立，那么对html设置overflow:hidden,还是能看到滚动条。
 </body>
 </html>

实验环境：

Trident(IE内核)：IE6、IE7、IE8、IE9
Gecko(FF内核)：火狐
Webkit：谷歌

实验现象：在所有的实验环境中，右侧都没有看到滚动条。

实验分析与结果：实验现象与预期不同，预期是能看滚动条，而实验结果是不能看到滚动条，说明对html设置overflow:hidden有效，推出假设不成立，所以滚动条是html元素，而不是body元素

2、实验设计方案二

假如“滚动条是body元素，不是html元素”成立，那么对html和body均设置overflow:scroll,只能看到一个滚动条。

实验代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style>
 html,body{
 	overflow:scroll;
 }
 </style>
 </head>
 
 <body>
 假如“滚动条是body元素，不是html元素”成立，那么对html和body均设置overflow:scroll,只能看到一个滚动条。
 </body>
 </html>

实验环境：

Trident(IE内核)：IE6、IE7、IE8、IE9
Gecko(FF内核)：火狐
Webkit：谷歌

实验现象：在所有的实验环境中，都看到不止一个滚动条。

实验分析与结果：实验现象与预期不同，预期是只能看到一个滚动条，而实验结果是看到不止一个滚动条，说明对html设置overflow:scroll有效，推出假设不成立，所以滚动条是html元素，而不是body元素。

小结

由以上两个实验可以推翻“滚动条是body元素，不是html元素”的结论，而得出“滚动条即是body元素，又是html元素，默认情况下html元素”。

“滚动条是body元素，不是html元素”的重新验证

但有疑惑，为什么这么流行的代码会有错，到底是大家错了，还是我错了，最后进过更多的了解到，发现问题出在HTML和XHTML不同之上，以上的实验都是在XHTML中实现的，但在HTML中呢，还没有验证，随进行了下面的实验

去掉XHTML声明后的实验代码

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style>
 html,body{
 	overflow:scroll;
 }
 </style>
 </head>
 
 <body>
 假如“滚动条是body元素，不是html元素”成立，那么对html和body均设置overflow:scroll,只能看到一个滚动条。
 </body>
 </html>

实验环境：

Trident(IE内核)：IE6、IE7、IE8、IE9
Gecko(FF内核)：火狐
Webkit：谷歌

实验现象：在不同的实验环境中，看到的结果不同，但在IE6--9中均只出现了一个滚动条，但在火狐和谷歌浏览器中均出现了两个滚动条。

实验分析与结果：实验现象与预期差不多，但各个浏览器对此解释不同，兼容性不好。

总结

经过实验，可知：

在HTML中，且是IE环境下，滚动条是body元素，不是html元素；在非IE环境下，滚动条即是body元素，又是html元素，默认情况下html元素。
在XHTML中，滚动条即是body元素，又是html元素，默认情况下html元素。

参考文献

http://www.cnblogs.com/quzi/archive/2010/07/29/1788061.html

本作品采用知识共享署名-非商业性使用 3.0 Unported许可协议进行许可。

guaguapi_ndsc

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于“滚动条是body元素，不是html元素”的更多讨论

引言在解决IE6不兼容position:fixed问题的过程，看到网上有资料说“滚动条是body元素，不是html元素”，初始信以为真，后来在实践过程发现并不出现预期效果，随后对此问题进行了实验。“滚动条是body元素，不是html元素”的推翻1、实验设计方案一假如“滚动条是body元素，不是html元素”成立，那么对html设置overflow:hi
复制链接

扫一扫