详细内容请点击

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>11111111111111111</p>
<input id="gs" name="gs" type="text" value=""  />
</div>
</body>
</html>
以上这段代码在网上很常见，通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果，但这种办法有个缺陷，那就是：这会使页面上原有的absolute、relation都变成fixed的效果，在这里我就不做demo了，如果有怀疑，可以自己去试验一下。

于是我找了下资料，发现可以通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果，css代码如下：

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
上面代码可以直接使用了，如果要设置元素悬浮边距，要分别为设置两次，比如我要让某个元素距顶部10个像素，距左部也是10个像素，那就要这样子写：

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}
这样一来，IE6下实现position:fixed的效果解决了，而且也不会影响到其他的absolute、relation，但还有一个问题，就是悬浮的元素会出现振动

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！
然后我发现background-image无需一张真实的图片，设置成about:blank就行了。

下面附上完整代码

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

来源： http://www.cnblogs.com/hooray/archive/2011/05/20/2052269.html

更多js内容请点击

js完美解决IE6不支持position:fixed的bug的更多相关文章

  1. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  2. 解决IE6不支持position:fixed的bug

    /*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...

  3. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  4. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  5. 解决IE6不支持position:fixed;的问题

    在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...

  6. 修正IE6不支持position:fixed的bug（转）

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  7. IE6不支持position:fixed的解决方法

    解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

  8. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  9. 让IE6也支持position:fixed

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...

随机推荐

  1. Spring+Struts+Ibatis的配置

    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> < ...

  2. 在VS2012中使用GDI+

    首先说明,在VS的较高版本中,已经包含GDI+的SDK,不用再次下载,只需要使用前应用相应的头文件,添加些代码即可.但是VC6.0中,没有GDI+SDK,需要同志们下载才行. 步骤: 1.在stdaf ...

  3. CSS实现标题右侧“更多”

    HTML < h2>< a h ref="#" >标题< /a> < span>更多…< /span> < /h2 ...

  4. maven中解决javax.servlet.jsp.PageContext cannot be resolved to a type

    在eclipse环境下用maven出现:javax.servlet.jsp.PageContext cannot be resolved to a type. 这是由于没有引入jsp-api引发的问题 ...

  5. SAP MRP的计算步骤

          SAP MRP的计算步骤,物料需求计划(简称为MRP)与主生产计划一样属于ERP计划管理体系,它主要解决企业生产中的物料需求与供给之间的关系,即无论是对独立需求的物料,还是相关需求的物料, ...

  6. C#反射深入学习

    C#反射 反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得 ...

  7. Android学习之路

    Android基础 整理下个人认为新手们必须要掌握的知识点,顺便也会附带相应觉得不错的讲解博客地址. 两分钟彻底让你明白Android Activity生命周期(图文)! Activity实际开发中使 ...

  8. opencv官网

    http://wiki.opencv.org.cn/index.php/Template:Doc

  9. 使用Url.Routeurl获取url值。

    1,获取url值.         public ActionResult About()         {            RouteValueDictionary RVD = new Ro ...

  10. 利用FluorineFx的ByteArray上传图片

    Flex端利用new PNGEncoder().encode(bitmapData)将png图片转换为ByteArray,然后传给服务器,服务端需要定义一个public ByteArray Uploa ...