文档章节

解决IE6不支持position:fixed问题

spademan
 spademan
发布于 2013/10/25 15:27
字数 464
阅读 178
收藏 14

很少的时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,但是万恶的IE6却不支持,下面讲两种方法解决这个问题。

方法一:

*html {/* 只有IE6支持 */
    background-image: url(about:blank); /* 使用空背景 */
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6浏览器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

这个方法要注意的是,*html使用固定位置空背景目的是解决滚动的时候抖动的问题,原理是这样,滚动页面浏览器重新计算出网页,然后执行css,所以固定元素产生延迟的抖动,使用固定背景之后,在滚动的时候先执行了css,再重新计算网页,所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值,可以根据这个来设置位置,比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二:纯css的解决方法

html { _overflow: hidden; }
body { _height: 100%; _overflow: auto; }
.box {
    position: fixed;
    left: 10px;
    top: 180px;
    _position: absolute;
}

原理很简单,滚动条是body的滚动,固定元素是相对body定位,那么把它设置窗口那么高,不就一直是在窗口那个位置了?

最后,我选择的是方法一。
虽然第二种看起来简单,但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug,不太敢用。第一种方法感觉安全一些,而且可以查看淘宝网,也是用的第一种方法。

© 著作权归作者所有

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
修正IE6不支持position:fixed的bug

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

Nannull
2014/02/28
0
0
ie6,ie7,ie8对position:fixed的圆满解决方案-整理

ie6,ie7,ie8对position:fixed的完美解决方案--整理 ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法...

donny945
2014/05/12
90
3
IE6不支持position:fixed的解决方法

下面这段代码在网上很常见,通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果,但这种办法有个缺陷,那就是:这会使页面上原有的absolute、r...

fengyuqing
2013/04/17
0
0
css固定元素位置(fixed)

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。...

i33
2012/11/06
0
0
IE CSS Bug及解决方案参考手册

作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示。当然,还有性能问题。不过,今天要说的是样式的兼容问题。在IE/Mozilla/Webk...

solu
2011/01/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RocketMQ的事务投递

RocketMQ的事务投递 这是阿里的分布式事务图: 1、A服务先发送个Half Message给Brock端,消息中携带 B服务 即将要+100元的信息。 2、当A服务知道Half Message发送成功后,那么开始第3步执行本...

春哥大魔王的博客
33分钟前
1
0
Qt编写自定义控件31-面板仪表盘控件

一、前言 在Qt自定义控件中,仪表盘控件是数量最多的,写仪表盘都写到快要吐血,可能是因为各种工业控制领域用的比较多吧,而且仪表盘又是比较生动直观的,这次看到百度的echart中有这个控件...

飞扬青云
39分钟前
3
0
DisplayPort 迎来重大更新,数据带宽性能提高3倍

VESA宣布了他们对DisplayPort接口三年来的第一次重大更新。 与DP 1.4a相比,DisplayPort 2.0提供了三倍于DP 1.4a的数据带宽性能,支持超过8K的分辨率,更高的刷新率和更高分辨率的HDR,以及其...

linuxCool
46分钟前
2
0
《Linux就该这么学》2019年7月20日第八天上课笔记

du命令 du -sh /newFS/ 察看文件/文件夹数据占用量 SWAP 交换分区的设置 磁盘容量配额 RHEL 5/6 usrquota RHEL 7 quota 软硬连接 ln 软 指针指向inode 硬 建立新的inode RAID 0 1 5 1+0...

2lodoss
48分钟前
1
0
适合钱包应用开发的ERC20代币数据集

Erc20Tokens数据集包含超过1000种主流的以太坊ERC20代币的描述数据清单和图标,可用于钱包等区块链应用的开发,支持使用Java、Python、Php、NodeJs、C#等各种开发语言查询主流ERC20代币的相关...

汇智网教程
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部