关于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">

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－躲在虫谷的猫－

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+]

－> 如果你觉得写样式表的方式太麻烦，可以直接使用插件，下载地址：

提醒：以上效果需要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.设定多行文本框的滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

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

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

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

6.滚屏显示

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

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.οnmοusedοwn=sc

document.οndblclick=initialize

</script>

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