让IE支持position:fixed

由于IE6只支持CSS1，IE7对position:fixed的解释行为也不标准（不过可以无视），所以只能绕道解决了。
看到很多都是用JavaScript实现的，其实就用CSS也能解决。

 

如果不知道position:fixed的作用，你可以用Firefox之类的浏览器浏览下本论坛的页面，在载入时会有个loading框，而且即使使用滚动条，也仍然会垂直居中显示。

详细描述如下：
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

如果只是要让IE6支持的话，可以通过下面的代码模拟：

The xhtml code:
普通浏览复制代码打印代码关于程序
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <!--  
  4. 注意：必须要用声明为标准模式  
  5. 其他代码省略  
  6. -->  
  7. <!--[if IE 6]>  
  8. <style type="text/css">  
  9. html{overflow:hidden;}  
  10. body{height:100%;overflow:auto;}  
  11. .fixed{position:absolute;/*还可以在这写top和left属性，不过建议针对id来写*/}  
  12. </style>  
  13. <![endif]-->  
<!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"><!--注意：必须要用声明为标准模式其他代码省略--><!--[if IE 6]><style type="text/css">html{overflow:hidden;}body{height:100%;overflow:auto;}.fixed{position:absolute;/*还可以在这写top和left属性，不过建议针对id来写*/}</style><![endif]-->


IE5和5.5仍无法用这个css hack，但IE5以后版本都支持在CSS中使用expression，即可以用JavaScript来设定CSS属性值。例如：

The html code:
普通浏览复制代码打印代码关于程序
  1. <!--[if IE 5]>  
  2. <style type="text/css">  
  3. .fixed{  
  4. postion: absolute;  
  5. bottom: auto;  
  6. top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);  
  7. }  
  8. </style>  
  9. <![endif]-->  
<!--[if IE 5]><style type="text/css">.fixed{postion: absolute;bottom: auto;top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);}</style><![endif]-->


此外，也能用这种方法来解决IE5~IE6：

The html code:
普通浏览复制代码打印代码关于程序
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  
  5. <!--  
  6. 注意：必须加上XML Prolog  
  7. 其他代码省略  
  8. -->  
  9. <!--[if lt IE 7]>  
  10. <style type="text/css">  
  11. body{overflow:hidden;}  
  12. #wrapper{height:100%;overflow:auto;}  
  13. #fixed{position:absolute;right:17px;}  
  14. /*这里写成id了，所以给了个17，其实是滚动条的宽度*/  
  15. </style>  
  16. <![endif]-->  
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><!--注意：必须加上XML Prolog其他代码省略--><!--[if lt IE 7]><style type="text/css">body{overflow:hidden;}#wrapper{height:100%;overflow:auto;}#fixed{position:absolute;right:17px;}/*这里写成id了，所以给了个17，其实是滚动条的宽度*/</style><![endif]-->


更多内容可以参考http://dancewithnet.com/2007/04/ ... css-fixed-position/

posted @ 2010-11-16 10:41  jhti  阅读(2124)  评论(0)    收藏  举报