潜匿转动条的多种要领与实例说明
发布时间：2018-09-01 08:43:00 所属栏目：创业 来源：站长网
导读：在用ie6赏识有框架的xhtml页面的时辰，默认会程度和垂直转动条会一路呈现，这是ie6的一个 bug，在firefox上是正常的，呈现的缘故起因是其对XHTML 1.0 transitional doctype的表明缺陷. 对付这个bug一样平常有3种办理方案， 要领1: 代码： html { overflow-y: scroll
|
在用ie6赏识有框架的xhtml页面的时辰，默认会程度和垂直转动条会一路呈现，这是ie6的一个 bug，在firefox上是正常的，呈现的缘故起因是其对XHTML 1.0 transitional doctype的表明缺陷. 对付这个bug一样平常有3种办理方案， 要领1: 代码： html { overflow-y: scroll; } 道理：逼迫表现ie的垂直转动条，而忽略程度转动条 利益：完全办理了这个题目, 应承你保持完备的XHTML doctype. 弱点：纵然页面不必要垂直转动条的时辰也会呈现垂直转动条。 要领2:(保举回收)代码： html { overflow-x: hidden; overflow-y: auto; } 道理：潜匿横向转动，垂直转动按照内容自顺应 利益：在视觉上办理了这个题目.在不须要的时辰, 未逼迫垂直转动条呈现. 弱点：只是潜匿了程度转动条，假如页面真正必要程度转动条的时辰， 屏幕以外的内容会由于用户无法程度转动，而看不到。 要领3: 代码： body { margin-right: -15px; margin-bottom: -15px; } 道理：这会在margin的程度和垂直偏向上添加一个负值, IE添加了该准确数值后, 便会去除对转动条的需求假象. 利益：在视觉上办理了这个题目.，垂直转动按照内容自顺应 弱点：因为"工钱建设"了15px的外边距(margin), 以是无法行使该添补过的屏幕地区. ------------------------------------ 配置样式 在原本的html的时辰，我们可以这样界嗣魅整个页面的转动条 措施代码 措施代码 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不是很尺度以是这样可以见效，而在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) （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读