位置:首页 » 教程 » js完美解决IE6不支持position:fixed的bug

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

日期:2015-04-02 阅读:2num
Advertisement

  关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要。特别是你需要用到头尾悬停调用的时候

  先来看段代码

  ?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!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代码如下:

  ?


1

2

3

4

5

6

/* 除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个像素,那就要这样子写:

  ?


1

2

3

4

/* 除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就行了。

  下面附上完整代码

  ?


1

2

3

4

5

6

7

8

/* 除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)))}

  以上所述就是本文的全部内容了,希望大家能够喜欢。

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

    关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要.特别是你需要用到头尾悬停调用的时候 先来看段代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&

  • 解决IE6不支持position:fixed的bug

    IE6不认识position:fixed,需要用position:absolute去模拟,然后实时计算出top的值,另外需要给html和body加两个样式,防止滚动的时候出现抖动, 外需要注意的一点就是,导航的宽度必须是固定值,不能是auto或者100%因为fixed和absolute都不认识,当然你也可以手动获取到导航的宽度,然后写到浮动导航样式里,不过有个前提,导航原先样式里不能有:position:relative,情况可能比较多,最简单的方法还是把导航宽度定死 代码如下 复制代码 <!D

  • 解决IE6不支持Css FIXED实现详解

    fixed属性在我们很多前端都非常使用fixed属性来固定位置了,但是fixed属性在ie6下不被兼容了,下面小编来给大家整理一下解决IE6不支持Css FIXED方法. 例1. 下面这个方法可以完美的实现ie6里支持fixed 代码: 代码如下 复制代码 <!DOCTYPE html> <html> <head> <style type="text/css"> *{padding:0;margin:0;} html,body{ _hei

  • CSS实例教程:完美解决IE6不支持hover的方法

    破洛洛文章简介:完美解决IE6不支持hover的方法. <style type="text/css"> p:hover,p.hover { background:#eee; } /* 就是要多写一个.hover而已 */ </style> 下面这段代码要放到页面的底部在</body> 前: <script type="text/javascript"> //<!– 让所有标记支持hover function $(

  • ie6浏览器不支持position:fixed解决办法

    万恶的ie6浏览器不支持position:fixed,下面我来总结常见的解决ie6浏览器不支持position:fixed办法 纯css的解决方法 滚动条是body的滚动,固定元素是相对body定位,那么把它设置窗口那么高,不就一直是在窗口那个位置了? 代码如下 复制代码 html { _overflow: hidden; } body { _height: 100%; _overflow: auto; } .box { position: fixed; left: 10px; top: 180

  • CSS网页制作:让IE6支持position: fixed

    破洛洛文章简介:让IE6 比较完美地支持position: fixed. html { _background-image: url(about:blank); _background-attachment: fixed; /* prevent screen flash in IE6 */ } div{ overflow: visible; position: fixed; top: 50px; _position: absolute; /*IE6 用absolute模拟fixed*/ _top

  • 利用JS解决ie6不支持max-width,max-height问题

    本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法.需要的朋友可以过来参考下,希望对大家有所帮助 今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 代码如下: if($.browser.msie && $.browser.version == 6.0) { var maxWidth = parseInt($('.viewBigPic img'

  • js解决ie6不支持png图片有关问题

    js解决ie6不支持png图片问题 function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id)

  • DD_belatedPNG,解决IE6不支持PNG最佳方案

    DD_belatedPNG,解决IE6不支持PNG绝佳方案 IE6在渐渐被淘汰...不过还是要顾及这个让人头疼的东西... 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我今天介绍DD_belated

  • IE6下CSS position:fixed 的修正解法

    在ie6下css中的position:fixed用起来有一些问题,下面我来介绍IE6下CSS position:fixed 的修正解法,各位朋友可参考. IE6 不支援 CSS position:fixed 的 写法, 所以需要用其他写法达成. 网路上可以找到的解法非常多, 都列在下面的相关网页当参考资料, 有兴趣的在自行研究萝~ IE6 对於 CSS position:fixed 的修正解法 在此直接写我的作法: 代码如下 复制代码 #id_or_class_name { position:f

  • 应用ie7.js 来解决ie6

    使用ie7.js 来解决ie6 关于 IE7.js是一个JavaScript库,使Microsoft Internet Explorer的行为像一个标准兼容的浏览器.它修复许多HTML和CSS问题并使IE5和IE6下透明PNG正常工作. 状态 当前版本:2.1 BETA4. 用法 IE7.js 升级MSIE5.5-6是与MSIE7兼容. <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version

  • IE6不兼容position:fixed属性的解决办法

    网页制作Webjx文章简介:IE6下不兼容position:fixed属性!在网上也看了一些资料还是不行! IE6下不兼容position:fixed属性!在网上也看了一些资料还是不行! position: fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果.但是,它不支持IE6及以下版本.于是很多同学使用JS模拟.今天写了一个DEMO,涉及左侧.右侧.及上下两边,共四种位置的固定,与以往的教程不同的地方是,它使用CSS表达式来兼容IE5.IE6,且避免了js模拟时,拖动滚

  • [奇技淫巧] ie6fixed: 支持 ie6 的样式 position:fixed

    ie6被吐槽了多年, 早就应该被抛弃, 但还是没有死透透. 假如, 很不幸你需要支持ie6, 然后还需要做一个position: fixed的效果. 这个小工具也许可以帮到你. 不抖动, 非常顺滑. 代码: https://github.com/jinzhubaofu/ie6fixed DEMO: http://jinzhubaofu.github.io/ie6fixed/ 欢迎issue. --cut-- learnshare在2015-01-09 23:35:0回答到: 不建议分享 IE8

  • CSS教程:让IE6支持position:fixed

    网页制作poluoluo文章简介:但ie6总不支持它,所以用其他的属性来模拟(这个模拟在主流浏览器中都兼容,所以其他浏览器也不需要分开写position:fixed了). 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 我喜欢position:fixed,它很酷. 但ie6总不支持它,所以用其他的属性来模拟(这个模拟在主流浏览器中都兼容,所以其他浏览器也不需要分开写position:fixed了). 看效果先

  • JQuery解决IE6不支持透明png图片、png背景

    ie6不支持png背景是常发生的事情了,现在我们直接利用jquery fixpng插件来解决这个问题,相对js来说简单了很多,有需要的朋友可参考. 1,解决直接以 img 标签显示的png图片 代码如下 复制代码 $(document.body).fixpng({scope:'img'}); 可将body内的所有png图片显示为透明效果. 2,解决以 透明png为背景 图片的情况 代码如下 复制代码 $('div').fixpng(); 可将所有 div 标签 背景图为png的变为透明 演示 代

  • 解决ie6不支持min/max-width/height属性办法

    IE6 及其以下版本不支持 CSS 中的 min/max-width/height 属性相信很多人都不陌生,本文介绍了用 Javascript 修复这一问题的方法. 代码如下 复制代码 // 说明:让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性 // 整理:http://www.111cn.net // minmax.js: make IE5+/Win support CSS min/max-width/height // version 1.0, 08

  • js DD_belatedPNG解决ie6下png图片不透明方法

    前台开发的朋友都知道png图片在要ie6是不通过js是无法实现图片透明的,这种问题在ie6以上的版本不是问题,下面来看解决办法. 原理 这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜. 使用方法 1.在这里下载DD_belatedPNG.js文件. http://dillerdesign.com/experiment/DD_belatedPNG/#download 2.在网页中引用,如下: 代码如下 复制代码 <!--[i

  • 如何让position:fixed在IE6中工作

    网页制作poluoluo文章简介:本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression).你不可以直接使用该表达式,因为它可能会因为缓存而不更新.解决这一点的最简单的方式是使用eval包裹你的语句. 众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6--尽管有几个使用IE6的朋友,一起BS我--但是对于大项

  • IE6中position:fixed无效问题解决

    position:fixed使用就是固定位置了,但是这个css属性在ie6浏览器下是不给支持的,下面小编来给大家整理了一些关于IE6中position:fixed没有效果解决方法. 在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个问题,但是总觉得用JS来做布局的工作不是很好,网上找了下这个问题,发现可以直接用CSS方法解决,代码如下: 代码如下

  • 浏览器不支持position: fix的解决

    最近给朋友做一手机网站,网站底部需要放一浮动,网页向下滚动时,此浮动也跟着向下滚动,一直距于窗口底部,一般大家都是使用position: fixed实现这个功能,而作者也是这样实现的,但是在手机浏览器中却不支持position: fixed,本文就说下我的解决方法,大家看下明白就行了. css代码 .wap_bottom { height: 60px; width: 100%; position: fixed; z-index: 2; bottom: 0; left: 0; opacity: 0

最新文章
  • 请问 V2er, 类似于 cnzz 这种大流量的统计工具, 大概的系统构架是什么样的呢? 有相关的开源项目吗?

    接了个小项目, 做一系列网站的流量统计, 流量比较大(相对单一网站), 全部加起来每天千万 PV 差不多, 那么整个系统的构架大概应该是什么样呢? 或者哪位同学用过或者了解过有关的开源项目吗? PS: 由于某些特殊原因, 无法使用目前市面上的公用统计服务. --cut-- zrj766在2016-05-09 00:31:49回答到: piwik deben在2016-05-09 00:31:49回答到: @zrj766 piwik 如果是多用户多站点支持, 貌似 piwik 改起来有点儿工作量,

  • 华为Mate8熄屏快拍怎么设置 华为Mate8熄屏快拍怎么设置

    华为Mate8熄屏快拍设置方法.每当我们想要进行抓拍某种有趣的事情时,却似乎总是因为打开相机拍照太慢而错过,那么我们应该才能解决这个问题呢,下面就让小编来教你们华为Mate8熄屏快拍怎么设吧! 1)首先我们先打开[相机],然后点击右上角的[三],接着我们再点击中下方的[齿轮]设置.(如下图) 2)最后我们再点击[熄屏快拍]并选择[启动相机拍照]就可以了,这时我们只需要观关上屏双击两下音量下键试试即可出现1.5秒快速拍照的奇迹了.(如下图)

  • 做SEO不得不深思的问题 做SEO不得不深思的问题

    互联网的发展是飞快的,SEO也是一样,上至企业老板,下至创业草根站长,都明白SEO的价值性,尤其是2016年这段时间,学习SEO的人远远比往年的高,相信未来五年里,会呈现一个狼多肉少的局面,在做SEO操作时应该优先考虑哪些问题呢?岑辉宇为大家总结了一些问题,希望能对大家有所帮助. 第一个问题:SEO操作的最终目的是为了排名? 从发外链更新软文的工作开始,小编也曾以为这些操作的目的就是为了实现首页关键词排名,也曾做过一些词做到了首页,而事后客户的反馈就是:我的词已经在首页了,但为何迟迟没有订单呢?

  • 春节剩菜如何处理 春节剩菜如何处理

    过节不免每家每户都是丰盛的大餐,但是每每都是生下一大堆,看着烦心,倒掉又可惜,那么怎么处理这些剩菜呢?下面本站阅读小编就教您几招. 虽说年年有"余"是个吉利的意头,但新春佳节各家的餐桌总比平日丰盛,难免餐餐都有"余",倒掉当然可惜,吃不完留到下一餐,结果就是连续几天得吃剩菜,实在倒胃口.吃不完的食物在热锅和冰箱间一再往返,不但风味尽失营养流失,更有细菌滋生的安全隐忧.用最简单的做法,剩菜也能"旧貌换新颜". 第一招:凉菜事先分装 新年每家的餐桌上

  • QQ空间大图模块:我的世界你不懂 QQ空间大图模块:我的世界你不懂

    使用方法: 1:点击自定义. 2:点击右侧的新建模块→点击图片模块. 3:模块名称随便,用一个空格最好,图片地址上输入图片的地址,再点击"更多设置",背景.边框选择无,确定保存. 4:用鼠标调整一下图片的大小,让整个图片完全显示.(这一步有时候是不需要的) 5:接着点击模块管理→把"互动"以上的模块前面的√全部去掉,然后再把需要显示的模块打√,这样"日志"."留言"."个人形象"或"音乐收藏&qu

  • 微众银行QQ号怎么解绑? 微众银行QQ号怎么解绑?

    1)打开[微众银行]进入应用首页后点击左上角[个人头像],接着点击[个人信息].(如下图) 2)在个人信息页面中点击[QQ],接着点击右上角图标.(如下图) 3)点击[解除绑定],输入交易密码即可.(如下图)

  • 三星I9308I如何取消盖住屏幕静音功能 三星I9308I如何取消盖住屏幕静音功能

    通过盖住屏幕静音或暂停声音功能是指来电时可以使用手掌盖住手机来暂停来电铃声的播放.比如当您开会的时候,突然手机响了,如果您设置了此功能,只需要将手掌盖住在手机屏幕上即可使来电暂停或静音,若您想取消该功能,请按照以下步骤操作 1.在待机页面下,点击[应用程序]. 2.点击[设定]. 3.点击[控制]. 4.点击[手掌动作]. 5. 点击[静音/暂停]右侧开关,灰色代表关闭该功能. 完成上述操作后,盖住屏幕静音或暂停功能就取消成功了.

  • arcgis for flex api version3.7 教程:1.添加map和图层

    arcgis for flex api version3.7 教程:1.添加地图和图层 下面的步骤将引导你在你的flex应用中添加一个底图(basemap layer).我们假设你已经建立了一个空白 的工程,已经引入了arcgis for flex api的库.没有引入自己去引入. 通过地图展示地理信息是最简单直接的方法,arcgis for flex api提供了一套地图用户组件,该api支持各种主流类型的地图服务,用来展示地图功能,地图服务可以是ARCGIS Server map.image

  • 精心设计的钓鱼网站可被用来激活被盗手机 精心设计的钓鱼网站可被用来激活被盗手机

    今天,随着智能手机的迅猛发展和不断普及,它给每个人都带来了极大的便利,已经成为人们日常生活必不可少的一部分了.我相信,在每个人的手机中,都会存着很多关于工作和私人生活的信息,比如:旅游照片,工作文档,网购对账单等等.可见,它与我们的生活息息相关.如果一旦手机丢失,这对每一个人来说,就是一场晴天霹雳.我们所损失的,并不只是手机本身这么简单,那些私人信息的丢失,往往才是最可怕的. 如果你使用的是苹果公司出的智能手机的话,那么你就算是比较幸运的了.因为在苹果的智能手机中有这样一个很棒的功能,即:当你遇

  • 小弟我的android 第31天 - Activity(四) 小弟我的android 第31天 - Activity(四)

    我的android 第31天 - Activity(四) 我的android 第31天 - Activity(四) 八.应用的响应性(Responsive) 在Android中,应用的响应性被活动管理器(ActivityManager) 和窗口管理器(WindowManager)这两个系统服务所监视. 当用户触发了输入事件(如键盘输入,点击按钮等), 如果应用5秒内没有响应用户的输入事件,那么,Android会认 为该应用无响应,便弹出ANR(ApplicationNo Response) 对话

热门推荐
  • 西洋参含片每天吃几次好 西洋参含片每天吃几次好 西洋参可有效降低暂时性和持久性血压,西洋参皮部可见一棕色形成层环,苦干味浓.那么,西洋参含片每天吃几次好? 西洋参含片是以西洋参,蔗糖,药用糊精,食用乙醇,药用硬脂酸镁为主要原料制成的保健食品;西洋参补气养阴,清热生津.用于气虚阴亏,内热,咳喘痰血,虚热烦倦,消渴,口燥喉干.用量3-6g.益肺阴,清虚火,生津止渴.治肺虚久嗽,失血,咽干口渴,虚热烦倦.西洋参含片经功能试验证明,具有抗疲劳的保健功能.西洋参含片的适宜人群为易疲劳者.少年儿童不宜用西洋参含片. 本站阅读配图 西洋参含片的主要适宜人群
  • 外贸B2C:隐秘的金矿 外贸B2C:隐秘的金矿 隐秘的金矿 作者:丁家乐 在电商圈里有一个流传甚广的笑话.老婆问做电商的老公:"你们公司盈利吗?"老公回答:"我们是电商."老婆不解:"你们能盈利吗?"老公重复:"我们是电商."老婆很坚持:"你们什么时候盈利?"老公有点不耐烦"不是说了嘛,我们是电商." 时至今日,"做电商不盈利"几乎已经成了很多人的一个共识,就连天使投资人薛蛮子都曾放言:"如果现在谁能给我
  • 俄罗斯科学家披露神秘小行星或将撞击地球 俄罗斯科学家披露神秘小行星或将撞击地球 近日俄罗斯的科学家披露地球附近游荡着一颗神秘的小行星,体积大约相当于一座山的大小,这颗小行星每三年左右的时间间隔内会通过地球一次,如果撞击地球将导致严重的后果.俄罗斯科学家估计撞击产生的能量相当于2013年袭击俄罗斯车里雅宾斯克州陨石的1000倍左右. 虽然2014 UR116小行星目前对地球没有构成威胁,但是俄罗斯科学家认为目前我们很难对其进行精确的轨道计算,因为大型小行星的轨道半径较大,可能受到其他行星的引力干扰,如果它们的轨道发生变化,就有可能对地球构成威胁,因此弗拉基米尔·利普诺夫教授认