`
zzc1684
  • 浏览: 1228663 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

IE浏览器下当滚动网页滚动条的时候DIV依然固定在屏幕的设定的位置上

阅读更多

IE浏览器下当滚动网页滚动条的时候DIV依然固定在屏幕的设定的位置上

 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>无标题文档</title>  
    <style type="text/css">  
    #a {  
        width:200px;  
        height:200px;  
        border:solid red 1px;  
        background:#CCC;  
        position:absolute;  
        top:100px;  
        left:100px;  
        }  
    </style>  
      
    <script language="javascript" type="text/javascript">  
    function absolute(){  
    /*设置div垂直方向相对垂直滚动条的位置*/  
        document.getElementById("a").style.top = document.body.scrollTop+100+'px';  
    /*设置div水平方向相对水平滚动条的位置*/  
        document.getElementById("a").style.left = document.body.scrollLeft+100+'px';  
    }  
    function onload(){  
        /*可以自己选择一个合适的延迟时间来达到移动时候感官上的流畅感*/  
        setInterval('absolute()',1);  
        }  
      
    </script>  
      
    </head>  
      
    <body onLoad="onload()">  
    <div id="a">  
    aaaaaaaa  
    </div>  
    <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <br /><br /><br /><br /><br /><br /><br /><br /><br />  
    <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></body>  
    </html>  

 

注:例如

 

    <span style="background-color: #ff6600;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>  

等等的这种XHTML文档类型不支持这种方法

分享到:
评论

相关推荐

    用CSS实现跟随滚动条漂浮层代码

    `在某些旧版本的IE浏览器中可能不完全支持,因此为了保证兼容性,可能需要引入适当的polyfill或者采用备选方案,如`position: absolute;`结合JavaScript监听滚动事件来实现类似的效果。 总的来说,CSS的`position`...

    jquery简单实现滚动条下拉DIV固定在头部不动

    当滚动条的位置超过设定的阈值(此例中为250像素)时,通过addClass方法给目标DIV添加float类,使得DIV固定在顶部;当滚动条的位置未超过阈值时,通过removeClass方法移除float类,使DIV恢复默认的静态定位。 3. ...

    滚动条样式设置

    在网页设计中,滚动条是不可或缺的元素,它允许用户浏览超出视口的内容。随着Web技术的发展,滚动条已经不仅仅是功能性元素,还可以成为界面设计的一部分,提升用户体验。本主题将深入探讨“滚动条样式设置”,讲解...

    IE 展示 上下滚动 实现Marquee机制

    标题 "IE 展示 上下滚动 实现Marquee机制" 暗示了我们要讨论的是在Internet Explorer浏览器中实现一种类似电视新闻滚动字幕的效果,通常这种效果被称为Marquee(滚动条)。Marquee元素在HTML中用于创建一个可以自动...

    js网页滚动条滚动事件实例分析

    另外,本文还提到了在IE浏览器中使用document.documentElement来获取窗口的宽度及高度时,需要先设定DOCTYPE类型,以确保兼容性和正确的DOM结构。 最后,本文还提供了一个在线工具的链接,这个工具汇总了JavaScript...

    DIV+CSS网页代码注释.pdf

    在旧版IE浏览器中,`leftmargin`、`topmargin`、`rightmargin`和`bottommargin`用来设置文档与浏览器窗口边缘的距离,而`bgproperties=fixed`可固定背景图像不随页面滚动。此外,`scroll=yes/no`控制滚动条的显示,`...

    DIV+CSS网页另类上下布局的实例代码

    例如,本例中提到的IE浏览器的滚动条宽度问题,这就是一个典型的浏览器兼容性问题,作者通过设置*html,*html body来特别处理IE浏览器。 总结来说,DIV+CSS的上下布局实现中需要注意盒模型带来的布局偏差问题,以及...

    商城滚动楼层插件

    【商城滚动楼层插件】是一种常见的网页交互设计,主要用于电商网站的商品分类展示,它通过动态滚动的方式,将多个楼层(每个楼层包含不同的商品或类别)呈现在用户面前,提升了用户体验和浏览效率。这类插件主要依赖...

    DIV+CSS实现的框架,仿frameset,支持左侧缩进

    总的来说,这个项目提供了一种利用`DIV+CSS`替代`frameset`的解决方案,它既保留了多栏布局的功能,又避免了`frameset`的局限性,同时考虑到了老版本IE浏览器的兼容性问题。对于那些需要创建稳定、可维护且灵活布局...

    制作网页中Html+css小技巧收集

    例如,在代码示例中使用的`.gb`类设置`overflow:auto`,意味着如果内容超过设定的高度(本例中为100px),则会自动显示滚动条。 对于IE浏览器,有时会出现水平溢出不正确处理的问题,此时可以使用`overflow-x:...

    网页中数据置顶

    数据置顶是指在网页设计中,通过特定的技术手段,让某些内容或元素在用户浏览网页的过程中始终保持在屏幕的顶部位置,不受页面滚动的影响。这一技术在提升用户体验、增强信息传达效率等方面发挥着关键作用。 ### 二...

    CSS兼容性大全.pdf

    `min-width`在非IE浏览器中用于设定元素的最小宽度,但在IE中需要特殊的处理。一种解决方案是创建一个`&lt;div&gt;`并设置它的`min-width`,同时使用JavaScript表达式来实现IE的兼容。 6. **浮动元素与文本的3像素间隙**...

    元素未显示设置width/height时IE中使用currentStyle获取为auto

    为了解决这个问题,当需要获取元素的实际尺寸时,尤其是在IE浏览器中,可以采用以下策略: - 检查元素的`offsetWidth`和`offsetHeight`属性,这两个属性通常能提供元素的总宽度和总高度,包括边框和内填充。 - 如果...

    对于div,p等块级元素css如何实现自动换行

    在网页设计和开发过程中,我们经常会遇到需要处理内容自动换行的情况,尤其是在块级元素如div、p等元素中的文本内容超过了设定的宽度后,自动换行的处理就显得尤为重要。本文将详细探讨如何通过CSS来实现块级元素...

    网页布局绝对定位(position)轻松简单

    fixed定位则使元素固定在屏幕的某一位置,不会随着滚动条滚动。 绝对定位的一个关键概念是包含块(containing block),它是元素定位的基础。通常,非绝对定位的元素的包含块是其最近的块级祖先元素的内容区边缘,...

    webcss7PPT教案学习.pptx

    而对于`a`和`img`标签,我们可能需要消除在IE浏览器中出现的边框,并利用`vertical-align`进行垂直对齐。此外,列表项`li`、强调标签`i`和`em`等也需要被初始化以消除默认样式。 在处理链接`a`时,我们需要初始化并...

    类似天猫商品详情随浏览器移动的示例代码

    在网页设计中,有时我们需要实现一种效果,使得页面上的某个元素在用户滚动浏览器窗口到特定位置时固定在屏幕顶部,这种效果类似于天猫商品详情页中的购物车浮动功能。本示例代码就是为实现这一功能而设计的,它利用...

    JS 实现导航栏悬停效果

    在JavaScript实现的导航栏悬停效果中,遇到的问题主要是在Internet Explorer浏览器中,当滚动滚动条或使用鼠标滚轮时,导航栏会出现抖动现象。然而,在Chrome和Firefox浏览器上,这种现象并未出现,这表明可能是个别...

    Html+CSS浮动的广告条实现分解

    对于旧版IE浏览器,使用了`_position: absolute`和`_top: expression(eval(document.documentElement.scrollTop))`来实现类似的效果,这是对老版本IE的hack,使其能正常显示固定定位。 最后,JavaScript部分通过...

    浅谈移动端适配大法

    在PC时代,由于IE浏览器的不兼容问题,前端开发者经常需要对IE进行特殊的兼容处理。而在移动互联网时代,虽然不再需要兼容IE,但分辨率的适配问题成为了新的挑战。 在移动端适配中,百分比单位是一个非常常用的技巧...

Global site tag (gtag.js) - Google Analytics