方法： 1、使用“overflow-y:scroll”语句； 2. 使用“overflow-x:hidden;overflow-y:auto;” 陈述; 3. 使用“margin-right:-15px;margin-bottom:-15px ;” 声明。本教程的运行环境：windows7系统、CSS3HTML5版本、戴尔G3笔记本
方法： 1、使用“overflow-y:scroll”语句； 2. 使用“overflow-x:hidden;overflow-y:auto;” 陈述; 3. 使用“margin-right:-15px;margin-bottom:-15px ;” 陈述。
本教程的运行环境：windows7系统，CSS3&&HTML5版本，戴尔G3笔记本。
方法1
代码如下所示：
html { overflow-y: scroll; }
原理：强制显示ie的垂直滚动条，同时忽略水平滚动条
优点：彻底解决这个问题，允许您保留完整的 XHTML 文档类型。
缺点：即使页面不需要垂直滚动条，也会出现垂直滚动条。
方法二：（推荐）
代码如下所示：
html { overflow-x: hidden; overflow-y: auto; }
原理：隐藏垂直滚动，垂直滚动根据内容自适应
优点：从视觉上解决问题。 不必要时不强制显示垂直滚动条
缺点：仅隐藏水平滚动条，如果页面确实需要水平滚动条
由于水平滚动困难，用户看不到屏幕外的内容。
方法三
代码如下所示：
body { margin-right: -15px; margin-bottom: -15px; }
原理：这会在边距的水平和垂直方向上添加一个负值。 IE添加精确值后，将不再需要滚动条
优点：直观地解决这个问题。 垂直滚动适应内容
缺点：由于15px边距的“人为创造”，导致填满的屏幕区域无法使用
------------------------------------------------
设置风格
在原来的html中，我们可以这样定义整个页面的滚动条
代码如下所示：
<pre class="brush:css;toolbar:false">body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
但是同样的代码，我们的应用程序在xhtml下无法运行，相信很多好朋友都遇到过同样的问题
那么xhtml下如何应用滚动条样式呢？看下面的代码
代码如下所示：
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
这段代码和上一段唯一的区别是，在css定义的元素上，一个是body，一个是html。我们再测试一下，把html页面
将“body”改为“html”进行测试，发现仍然可以达到疗效。 所以为什么？
从字面上看，xhtml比html多了一个x，那么这个x虽然也是xml，但是为什么要在上面加上一个xml呢？ 其实最根本的原因是为了让html更加结构化和标准化（因为html太软了）。
我们在html上定义的是body，因为html不是很标准css去除滚动条，所以这个可以用，但是这个在xhtml上就不行了，
我看那种图很明显body标签本身并不是根元素，只有html才是根元素，而且页面的滚动条也属于根元素，所以这就是为什么我们定义body 没有效果，因为我们定义的只是一个子元素。 ok，原理我们都知道了，我们来做个实验，如果把定义“body”或“xhtml”换成“*”，
代码如下所示：
*{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
html和xhtml都通过，因为*表示定义页面上的任何标签实际上都包含“html”标签。
（ps：其实，与其说html和xhtml的区别，不如说有没有XHTML 1.0过渡doctype的区别，但是如果把页面的XHTML 1.0过渡doctype去掉，那么这个页面就没有doctype了，默认显示方式为html4.01，但是需要将XHTML 1.0过渡doctype更改为HTML 4.01 doctypecss去除滚动条，相同的页面定义主体将不会生效，尽管该页面的标准是html 4.01）
发表评论