Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >完美解决IE6不支持position:fixed的bug

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

作者头像
胡尐睿丶
发布于 2022-03-23 07:03:16
发布于 2022-03-23 07:03:16
35000
代码可运行
举报
文章被收录于专栏:代码小睿代码小睿
运行总次数:0
代码可运行

  废话不多说,先看一下下面这段代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 除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个像素,那就要这样子写:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 除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就行了。

  下面附上完整代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 除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)))}

  至于demo我想大家都看到了吧:)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2011-05-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
在web2.0时代,越来越多的网站如雨后春笋般的冒了出来。而且这些网站提供了很多我们常见的功能。如:返回顶部等等小特性。
业余草
2019/01/21
1.5K0
纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
常用的AJAX弹出层代码
Code <!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=gb2312" /> <titl
菩提树下的杨过
2018/01/22
1.5K0
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。它们就像是竖着的图片轮转一样。 这样的页面有很多,如:iPhone 5C页面:http://www.dowebok.com/demo/2014/77/index8.html  网易邮箱6.0:http://www.dowebok.com/demo/2014/97/ 来往官网:http://www.laiwang.com 百度百科史记2013:http://www.dowebok.com/demo/2014/78/ 搜狐快站:http://www.dowebok.com/demo/2014/80/ 证券时报网移动产品:http://www.dowebok.com/demo/2014/77/index9.html 邮箱大师:http://www.dowebok.com/demo/126/ 360安全路由:http://www.dowebok.com/demo/2014/77/index10.html 等等一些例子。看看实际代码:
业余草
2019/01/21
4.4K0
【HTML代码】在HTML加入图片飘窗的代码[汇总]
DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法,dede网站二开,以下龙腾飞网络科技-小吴在建站实操中笔记记录,织梦dede建站教程保存使用非常方便:
攻城狮与产品喵
2025/03/13
6650
【HTML代码】在HTML加入图片飘窗的代码[汇总]
CSS使用技巧
http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html
bear_fish
2018/09/20
8030
CSS使用技巧
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
神葳
2021/01/22
1.4K0
CSS使用技巧
在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。
ruanyf
2018/09/21
1.4K0
CSS使用技巧
JavaScript 鼠标拖拽div 改变其大小
转自: http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html
acoolgiser
2019/01/17
2K0
JavaScript 自定义html元素鼠标右键菜单
在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值
授客
2019/12/10
2.6K0
JavaScript 自定义html元素鼠标右键菜单
从零开始学 Web 之 BOM(三)offset,scroll,变速动画函数
在 window 下有一个方法:window.getComputedStyle(element, string) 可以获取一个元素所有的属性值。
Daotin
2018/08/31
1.2K0
JavaScript 代码分析
#div1 {width:100px; height:100px; background:red;  position:absolute; }
三杯水Plus
2018/11/14
9710
【解疑答惑】css中经常被忽略的代码陷阱
css大家都认为是很简单东西,但是是代码就有让人头疼的时候,只是多少的问题,伴着小编走过的路,在前端多少也滚了一些坑,今天为了方便后来者,把收集到的东西跟大家分享一下,有需要的朋友可以当作参考,希望对各位盟友有帮助: 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两
程序员互动联盟
2018/03/13
6950
30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档。除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术。 1.垂直对齐 如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题: .vc{ position: relative; top: 50%; -webkit-transform: transl
前朝楚水
2018/04/02
1K0
js实现带框拖拽
带框拖拽 目录 代码实例 代码解析 下载源码链接 代码实例 <!DOCTYPE html> <html> <head> <title>带框拖拽</title> <style type="text/css"> .div1{ width:400px; height: 400px; background: blue; position: relative; margin: 20px; } .drag1{
星辉
2019/01/15
5.5K0
低仿lusaxweb鼠标
幸福的婚姻生活,往往会被卑鄙的勾当、阴险的猜忌所破坏。——莎士比亚 这是 http://lusaxweb.net/ 它的鼠标很有意思,是一个圈,能够反色,我们低仿一个 代码如下: <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; cursor: none; } .img {
阿超
2022/12/16
2570
低仿lusaxweb鼠标
纯滚动怎么理解_scrollview不滚动
  前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll
全栈程序员站长
2022/09/20
2.3K0
MUI导航栏透明渐变----原生JS实现
首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 此效果采用的RGBA做的透明渐变,所以CSS样式中的backgroundColor的值必须是RGBA css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; } .module-layer-
Rattenking
2021/01/29
5.6K0
JavaScript 学习总结
Java和Javascript的区别就像印度和印度尼西亚的区别,名字中有点相同的东西。
三杯水Plus
2018/11/14
1.5K0
左下角悬浮广告代码_右下角浮动广告代码
<!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>右下角广告代码-web前端开发</title> <script type=”text/javascript”> window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} function $(id) {return document.getElementById(id);} //短信提示使用(asilas添加) var divT,divL,divW,divH,docH,docW,docST,docSL,objTimer,i = 0; function getMsg() { try{ divT = parseInt($(“eMeng”).style.top,10); //层top位置 divL = parseInt($(“eMeng”).style.left,10); //层left位置 divH = parseInt($(“eMeng”).offsetHeight,10);//层宽 divW = parseInt($(“eMeng”).offsetWidth,10);//层高 docW = document.documentElement.clientWidth;//窗口宽 docH = document.documentElement.clientHeight;//窗口高 docST=document.documentElement.scrollTop; docSL=document.documentElement.scrollLeft; $(“eMeng”).style.top = parseInt(docST,10) + docH + 10+”px”; $(“eMeng”).style.left = parseInt(docSL,10) + docW – divW+”px”; $(“eMeng”).style.visibility=”visible”; objTimer = setInterval(“moveDiv()”,10); } catch(e){} } function resizeDiv() { try{ divH = parseInt($(“eMeng”).offsetHeight,10); divW = parseInt($(“eMeng”).offsetWidth,10); docW = document.documentElement.clientWidth; docH = document.documentElement.clientHeight; $(“eMeng”).style.top = docH – divH + parseInt(document.documentElement.scrollTop,10)+”px”; $(“eMeng”).style.left = docW – divW + parseInt(document.documentElement.scrollLeft,10)+”px”; } catch(e){} } function moveDiv() { try{ if(parseInt($(“eMeng”).style.top,10) <= (docH – divH + parseInt(document.documentElement.scrollTop,10))) { window.clearInterval(objTimer) objTimer = setInterval(“resizeDiv()”,1) } divT = parseInt($(“eMeng”).style.top,10); $(“eMeng”).style.top = divT – 1+”px”; } catch(e){} } function closeDiv()
全栈程序员站长
2022/11/05
2.6K0
My97DatePicker中的bug[_ is null] fixed
在使用My97DatePicker中发现一个bug:_ is null,把他的源代码美化一下(在线美化地址在我的“在线手册速查”中),发现作者里面有一个问题没有考虑到。
the5fire
2019/02/28
1.4K0
相关推荐
纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档