<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
width:100%;
height:100%;
}
.right{
width:100px;
height:30px;
position:fixed;
top:100px;
right:100px;
pink;
}
.bottom{
width:900px;
height:30px;
margin:0 auto;
pink;
position:fixed;
left:auto;
bottom:;
} /*========================IE6兼容position:fixed属性的第一种方法===========*/
.center{
width:300px;
height:200px;
pink;
position:fixed;
top:100px;
left:100px;
_position:absolute;
_right:auto;
_left:expression(eval(document.documentElement.scrollLeft+100));
}
.top{
width:300px;
height:100px;
pink;
position:fixed;
top:;
right:400px;
_position:absolute;
_left:auto;
_right:expression(eval(document.documentElement.scrollRight+400));
}
.bottom1{
width:100px;
height:50px;
blue;
position:fixed;
right:50px;
bottom:100px;
_position:absolute;
_left:auto;
_bottom:expression(eval(document.documentElement.scrollBottom+100)); }
.top1{
width:200px;
height:200px;
red;
position:fixed;
top:20px;
right:50px; }
</style>
<!--==============IE6兼容position:fixed属性的第一种方法=============-->
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
.right{position:absolute;}
.bottom{position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div class="right">右边</div>
<div class="bottom">底部</div>
<div class="bottom1">底部1</div>
<div class="center">中间</div>
<div class="top">顶部</div>
<div class="top1">顶部1</div>
</body>
</html>

注意:Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。
html,* html body{background-image:url(about:blank);background-attachment:fixed}这个方法可以解决IE6振动BUG

/*让position:fixed在除IE6以外的主流浏览器可用! */
.fixed-top/* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-left/* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right/* 右侧固定 */{position:fixed;right:0px;left:auto;}
/*一下的是让position:fixed在IE6下可用! */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top/* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right/* IE6 右侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom/* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left/* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

From: http://lflianglan.blog.51cto.com/7020643/1217420

让IE6兼容position:fixed的更多相关文章

  1. css 兼容 position:fixed

    我是头 我是主体 有多少内容,我就有多高   我是脚 我要随滚动条滚动 我要随滚动条滚动 我要随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. IE6下position:fixed;兼容

    *html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...

  3. IE6的position:fixed

    手头一个项目中,要实现把一个浮层控制在浏览器窗口右下角,用”position:fixed”来控制最合适不过了. 但万恶的IE6不支持这个属性,之前采用过的方法有:将滚动条转移到body上,使用绝对定位 ...

  4. IE6下position:fixed不支持问题及其解决方式

    IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...

  5. IE6中position:fixed无效问题解决

    在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...

  6. 让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

    做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...

  7. 小技巧css解决移动端ios不兼容position:fixed属性,无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

  8. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  9. 打造IE6的position:fixed整理篇

    fixed真的是一个很好的属性.特别是做弹层的时候.可惜的是“国内主流浏览器”IE6大大不支持. 一般的我们都会通过CSS中的表达式来解决这个问题. .fixed { position:absolut ...

随机推荐

  1. PHP AOP

    看到一篇好文,果断收藏 点击打开链接http://www.cnblogs.com/afritxia2008/archive/2010/07/03/1770427.html

  2. 跨域技术-jsonp

    JSONP是JSON with padding 的简写,其有两个部分组成,一个是回调函数,一个是数据,其基本格式如下 function handleResult(result){ alert(resu ...

  3. 用C#实现MD5算法

     /// <summary>     /// 一个实现MD5散列字符串的类     /// </summary>     public sealed class MD5Hash ...

  4. H5小内容(五)

    Geolocation(地理定位)   基本内容     地理定位 - 地球的经度和纬度的相交点     实现地理定位的方式       GPS - 美国的,依靠卫星定位       北斗定位 - 纯 ...

  5. mui h5 动态实现数据的移除和数据操作完后的重新获取

    HTML 代码 <ul class="mui-table-view" id="OA_task_1"> <li class="mui- ...

  6. PHP框架原理

    本文主要来聊聊框架理论,但不针对任何一款框架,不过任何一款框架都离不开这个理论,首先我们了解下框架的来龙去脉,任何技术的出现都是为了解决某个问题,之前的博客有讲过smarty,其存在就是为了html和 ...

  7. 问自己----也是自己该怎么走的路(phper)

    1.首先看了PHP的源码API函数,对于许多口水仗的争论一笑而过,只是停留在脚本级别上的什么效率,安全...之争完全就是无稽之谈,没有深入理解API,所有的争论都是臆测和不科学的态度.你做了吗? 2. ...

  8. leetcode第七题Reverse Integer (java)

    Reverse Integer Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, retu ...

  9. 第 4 章 多例模式【Multition Pattern】

    以下内容出自:24种设计模式介绍与6大设计原则 这种情况有没有?有!大点声,有没有? 有!,是,确实有,就出现在明朝,那三国期间的算不算,不算,各自称帝,各有各的地盘,国号不同.大家还记得那首诗< ...

  10. 运维安全系列基础服务之 FTP 服务(系列一)

    做了多年运维工程师,积攒了一些经验,和大家分享下.个人认为,运维安全话题的系列,主要包括下面四个方面: 基础服务 网络层 应用层 云安全 今天主要讲的是基础服务里面的[FTP服务][ftp]. 文件传 ...