关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
CSS定义在 loose.dtd和xhtml1-transitional.dtd下无效:

body{
SCROLLBAR-FACE-COLOR: #f2f2f2;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #999999;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #ff0000;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

解决办法就是

html,body{
SCROLLBAR-FACE-COLOR: #f2f2f2;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #999999;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #ff0000;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

新的文档类型定义模型使用html 元素作为容器。

类似的还有

document.body.scrollHeight等结果为0

需要使用新的办法:

var eleHeight
if(document.documentElement)
eleHeight = document.documentElement.scrollHeight
else
eleHeight = document.body.scrollHeight

滚动条资料整合

一直只会用简单的滚动条设置,今天抽了一下空,在网上找了几篇关于scrollbra的文章来,节选和修正了一下,整合成为一篇比较完整的文章,方便大家查阅,以后就不用找来找去了。基本上它的属性都已经列出来并且去掉了重复的部分,如果有新的我会在后续加上去的。好了,就说到这里拉,还在上班呢。

另外要注意的是,shtml的doctype就好像不支持scrollbar的这些属性我使用过几个头都不能让IE正确显示滚动条,这方面的资料还没有找到,有空放上去,大家使用的时候记得要注意了。。

可以显示效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

不能显示效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">(注!看日志最后一行)

<!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">

------------------------------- 躲在虫谷的猫 -

1.Scrollbar 属性

Scrollbar Properties

属性 CSS Version

版本 Compatibility

兼容性 Inherit From Parent

继承性 Description

简介

scrollbar-3d-light-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 亮边框颜色

scrollbar-highlight-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D界面的亮边(ThreedHighlight)颜色

scrollbar-face-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D表面(ThreedFace)的颜色

scrollbar-arrow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 方向箭头的颜色

scrollbar-shadow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 暗边框(ThreedDarkShadow)颜色

scrollbar-base-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 基准颜色。其它界面颜色将据此自动调整.一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的

设计

以上七个属性设置的值都是颜色值,可以使用样式表定义的各种表达方式。 [IE专有属性 IE5.5+]

-> 如果你觉得写样式表的方式太麻烦,可以直接使用插件,下载地址:http://www.windstudio.net/dw/files/ie55_scrollbar.mxp

提醒:以上效果需要IE5.5以上版本支持。



使用以上的样式定义内容,我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式,第一组样式属性用于

设定被设定对象是否显示滚动条,第二组样式属性则用于设置滚动条的颜色,要注意的本文涉及的样式属性都是ie才能支

持的,第二组的样式属性只有ie5.5版本才能支持,所以请大家在调试的时候注意。

2.overflow内容溢出时的设置

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

去掉水平及竖直的滚动条,可在网页原代码中加入以下代码:<body scroll=no>

B.去水平滚动条:<body style=”overflow-x:hidden”>

C.去竖直滚动条:<body style=”overflow-y:hidden”>

3.使用图片代替浏览器中的滚动条?

如果用源代码的方式,恐怕太麻烦了:)这里有一个文件包,可以直接下载以后使用。

地址:http://www.hi-fi2000.com/iescroll.zip

提示:

源代码中:调用JS的是这一句:

<SCRIPT src=”4.files/scroll.js”></SCRIPT>可以通过修改这一句来修改JS的存放目录,图片的修改也是一样。如果你打算让滚动条更适合你的站点,可以直接修改图片来达到目的。

其中:

垂直滚动条:1.jpg

上箭头:2.jpg

垂直滚动条:3.jpg

下箭头:4.jpg

水平滚动槽:5.jpg

左箭头:6.jpg

水平滚动条:7.jpg

右箭头:8.jpg

两根滚动条交接:9.jpg

4.设定多行文本框的滚动条

没有水平滚动条

<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条

<textarea style="overflow-y:hidden"></textarea>

没有滚动条

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

5.设定窗口滚动条的颜色

.coolscrollbar { scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon; }

将以上语句加入到样式表文件中或html头部的<style></style>当中,然后使用

<textarea class="coolscrollbar"></textarea>

6.滚屏显示

当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的。为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到<body> </body>之间。



<script language"javascript">

var currentpos,timer;

function initialize()

{

timer=setInterval("scrollwindow()",10);

}

function sc(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=document.body.scrollTop;

window.scroll(0,++currentpos);

if (currentpos != document.body.scrollTop)

sc();

}

document.onmousedown=sc

document.ondblclick=initialize

</script>

本文转自 netcorner 博客园博客,原文链接:  http://www.cnblogs.com/netcorner/archive/2008/03/01/2912221.html,如需转载请自行联系原作者

相关文章
|
5月前
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
29 2
|
7月前
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
|
JavaScript 前端开发
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: &lt;button id=&quot;btn&quot;&gt;切换&lt;/button&gt; &lt;div class=&quot;wrap&quot; id=&quot;wrap&quot; style=&quot;color: yellow;&quot;&gt; &lt;p id=&quot;text&quot; class=&quot;text&quot;&gt;这是一个段落&lt;/p&gt; &lt;ul class=&quot;list&quot;&gt;
|
前端开发
css calc()的使用,以及失效原因
css calc()的使用,以及失效原因
|
前端开发 JavaScript
fixed失效,css堆叠上下文问题
我们直接用具体案例来体会css堆叠上下文,因为官方veurpess-reco1.x版本,当你开启右侧子菜单时,右侧的子菜单fixed就失效了。
144 0
fixed失效,css堆叠上下文问题
|
前端开发
css:flex布局下overflow失效
css:flex布局下overflow失效
255 0
|
前端开发
CSS 文档中定位指南:static、relative、absolute、fixed、sticky
CSS 中 position 属性用于指定元素的定位方法的类型(static、relative、absolute、fixed、sticky)。
111 0
CSS 文档中定位指南:static、relative、absolute、fixed、sticky
|
Web App开发 存储 缓存
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
222 0
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
|
JavaScript 前端开发
vue中多行文字,多余的文字显示成...的css失效
vue中多行文字,多余的文字显示成...的css失效
320 0
vue中多行文字,多余的文字显示成...的css失效
|
移动开发 前端开发 JavaScript
Python HTML和CSS 1:html文档结构和常用标签
Python HTML和CSS 1:html文档结构和常用标签
176 0
Python HTML和CSS 1:html文档结构和常用标签