CSS怎么隐藏滚动条(三种方法)
xhtml中隐藏滚动条
在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,
方法1:
原理:强制显示ie的垂直滚动条,而忽略水平滚动条
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2:(推荐采用)
原理:隐藏横向滚动,垂直滚动根据内容自适应
优点:在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,
屏幕以外的内容会因为用户无法水平滚动,而看不到。
方法3:
原理:这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点:在视觉上解决了这个问题.,垂直滚动根据内容自适应
缺点:由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.
------------------------------------
设置样式
在原来的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:#;/*- 滑道 -*/
}
但是同样的代码,我们应用在 xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题
那么怎么才能在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:#;/*- 滑道 -*/
}
这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的
"body"修改成"html"测试一下,发现依然可以实现效果。那到底是为什么呢?
从字面上来看,xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面?其实最根本的原因就是要让html更加结构化标准化(因为html实在是太烂)。
我们在html里面定义的是body,因为html不是很标准所以这样可以生效,而在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 transitional doctype的区别,但是如果你把页面的XHTML 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的,虽然这个页面的标准是html 4.01)
以上内容就是本文给大家介绍的CSS隐藏滚动条方法有哪些的全部内容,希望大家喜欢。
CSS怎么隐藏滚动条(三种方法)的更多相关文章
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- [HTML/CSS]创建新元素的三种方法
第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h ...
- css引入页面的三种方法
1.内联式:直接在标签上写样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
- CSS元素隐藏的11种方法
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
随机推荐
- Anaconda3(0)环境基本使用
https://blog.csdn.net/u012005313/article/details/82347817 主要内容: 查看环境列表 创建新的 Python 环境 激活/停止 Python 环 ...
- ESP8266 LUA脚本语言开发: 准备工作-动手编译LUA固件
前言 这节咱自己编译LUA固件 准备一台linux的机子 我把固件放到了git上,方便电脑用http下载 我先用这个连接linux 大家随意哈,只要是一台linux的机子就可以,不管是图形页面还是命令 ...
- C语言实现linux之who功能
/* who_test.c */ #include<stdio.h> #include<string.h> #include<getopt.h> #include& ...
- nuxt中localstorage的替代方案
采用异步的方式进行存储数据,更高效快速,使用localforage是你最好的选择 具体转载自博客 Heap Stack Blog(pingbook.top) Nuxt storage data in ...
- Unity开发:5.0+版本标准资源包无内置问题
一.问题如下: 在Unity中,一般都会内置有基础的资源包,可以在Assets->Import Package中,点击其下的子项进行导入: 但是我发现,5.0版本与之前的4.x版本相比,安装包变 ...
- 【技术博客】利用Python将markdown文档转为html文档
利用Python将markdown文档转为html文档 v1.0 作者:FZK 元素简单的md文件 Python中自带有一个markdown库,你可以直接这样使用 md_file = open(&qu ...
- [Gamma]Scrum Meeting#5
github 本次会议项目由PM召开,时间为5月30日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- SpringBoot扩展点之一:SpringApplicationRunListener
三种监听器的关系 ApplicationListener.SpringApplicationRunListeners.SpringApplicationRunListener的关系: SpringAp ...
- C语言是什么
大家对于Java可能并不陌生,那你对c语言了解多少呢,今天小编带大家来了解c语言是什么. c语言是一门面向过程.抽象化的通用程序设计语言,广泛应用于底层开发.C语言具有高效.灵活.功能丰富.表达力强和 ...