IE6 position:fixed问题解决方案

开发 前端
IE6下position:fixed是老生常谈的问题了,主要问题就是IE6不支持position:fixed引起的BUG,这里向大家描述一下这个问题的解决方法,希望你会感兴趣。

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

***的IE6 position:fixed

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

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

  1. <!--[ifIE6]> 
  2. <styletypestyletype="text/css"> 
  3.  html{overflow:hidden;}  
  4.  body{height:100%;overflow:auto;}  
  5.  #fixed{position:absolute;}  
  6. </style> 
  7. <!--[endif]--> 
  8.  

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

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=utf-8"/> 
  7. <title>IE6position:fixed</title> 
  8. <style> 
  9. *{  
  10.  padding:0;  
  11.  margin:0;  
  12. }  
  13.  
  14. #fixed{  
  15.  background-color:#ddd;  
  16.  border:1pxsolid#aaa;  
  17.  position:fixed;  
  18.  right:0;  
  19.  top:0;  
  20. }  
  21. </style> 
  22. <!--[ifIE6]> 
  23. <styletypestyletype="text/css"> 
  24.  html{overflow:hidden;}  
  25.  body{height:100%;overflow:auto;}  
  26.  #fixed{position:absolute;right:17px;}  
  27. </style> 
  28. <!--[endif]--> 
  29. </head> 
  30. <body> 
  31. <divstyledivstyle="height:2000px"></div> 
  32. <dividdivid="fixed"> 
  33. FIXED  
  34. </div> 
  35. </body> 
  36. </html> 

【编辑推荐】

  1. JavaScript巧解IE6至IE8兼容问题
  2. CSS position属性定义和用法
  3. ***实现IE6/IE7/FF浏览器兼容通用方法
  4. CSS属性display:inline-block使用揭秘
  5. 深入探究DIV CSS布局中position属性用法

 

责任编辑:佚名 来源: flex.desizen.com
相关推荐

2010-09-15 14:22:05

IE6position

2010-08-19 10:33:54

IE6position:fi

2010-08-18 14:14:41

IE6IE7FF

2010-08-19 10:40:36

position:fiIE6

2010-08-27 13:31:58

IE6IE7Firefox

2010-10-08 16:31:08

AjaxIE6

2012-05-09 10:08:41

跨机房

2010-09-09 15:44:21

IEFFCSS

2010-03-30 16:04:34

Linux Nginx

2010-09-27 13:14:42

JVM内存限制

2010-10-08 13:27:51

IE6pngJavaScript

2011-01-12 17:26:27

2010-10-08 13:09:38

JavaScript数

2010-02-06 14:54:11

C++指针漂移

2010-05-31 12:53:56

Nagios apac

2010-04-28 19:24:17

Hp unix

2011-03-23 16:38:28

LAMP

2010-08-19 09:37:35

IE6fixed

2010-09-15 08:41:25

IE6IE7Firefox兼容

2010-08-04 10:20:30

Flex组件开发
点赞
收藏

51CTO技术栈公众号