温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

IE6 position:fixed问题的解决方法

发布时间:2021-11-17 17:50:04 来源:亿速云 阅读:161 作者:柒染 栏目:web开发

IE6 position:fixed问题的解决方法,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

向大家简单介绍一下解决IE6下position:fixed问题方法,造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的,相信本文介绍一定会让你有所收获。

IE6 position:fixed

这个内容是老生常谈了,主要问题就是IE6不支持position:fixed引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用position:absolute来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不***.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里)。知道了原因,我们就大概知道如何解决了:

<!--[ifIE6]> <styletypestyletype="text/css">  html{overflow:hidden;}   body{height:100%;overflow:auto;}   #fixed{position:absolute;}  </style> <!--[endif]-->

没错,就是加上这样的一段code,现在看看完整的页面code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>IE6position:fixed</title> <style> *{   padding:0;   margin:0;  }   #fixed{   background-color:#ddd;   border:1pxsolid#aaa;   position:fixed;   right:0;   top:0;  }  </style> <!--[ifIE6]> <styletypestyletype="text/css">  html{overflow:hidden;}   body{height:100%;overflow:auto;}   #fixed{position:absolute;right:17px;}  </style> <!--[endif]--> </head> <body> <divstyledivstyle="height:2000px"></div> <dividdivid="fixed"> FIXED  </div> </body> </html>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI