关于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/2912182.html  ,如需转载请自行联系原作者

相关文章
|
前端开发 JavaScript 容器
jQuery03(筛选&文档处理&CSS位置)
jQuery03(筛选&文档处理&CSS位置)
|
3月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
32 1
|
3月前
|
前端开发 开发者
几种常见的 CSS 文档应用,快看看你会几种?
几种常见的 CSS 文档应用,快看看你会几种?
|
6月前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
54 4
|
6月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
66 1
|
6月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
49 2
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
|
前端开发 容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
|
前端开发 容器
css——图片缩放,拉伸,变形的解决办法
css——图片缩放,拉伸,变形的解决办法
654 0