zoukankan      html  css  js  c++  java
  • 关于loose.dtd和xhtml1transitional.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>

  • 相关阅读:
    Ruby on rails3新手谈(1):Ruby on rails环境搭建
    更灵活,更易维护的WebHandler之通用webHandler编码方案(2)
    .Net Remoting之windows服务部署
    Ruby on rails3新手谈(2):简单的例子helloworld
    分组取最新记录的SQL
    验证日期的Javascript
    使用Javascript创建遮罩层并模拟Alert、Confirm对话框
    取得当前鼠标的X,Y坐标,及相关属性的介绍
    B/S结构系统中使用Session遇到的问题
    IE与FireFox的兼容性问题
  • 原文地址:https://www.cnblogs.com/netcorner/p/2912221.html
Copyright © 2011-2022 走看看