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

*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));
}

这里还须要解决的是“抖动”的问题,由于当你滚动滚动栏的时候expression下的样式一直在又一次计算而且运行css,会产生延迟的抖动。而在使用固定背景之后,在滚动的时候先运行了css,再又一次计算网页,所以不会产生抖动的现象。

以下是固定究竟部的代码,须要细致看一下:

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

PS:在网上看到expression的诸多弊病,也是雅虎34条里面竭力避免使用css表达式的一个重要原因,摘引一段话:表达式的问题就在于它的计算频率要比我们想象的多。不不过在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要又一次计算一次。给CSS表达式添加一个计数器能够跟踪表达式的计算频率。在页面中随便移动鼠标都能够轻松达到10000次以上的计算量。由此可见一斑。

IE6下position:fixed不支持问题及其解决方式的更多相关文章

  1. IE6下position:fixed;兼容

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

  2. ie6下position:fixed定位问题

    1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...

  3. Linux下Chrome浏览器不支持WebGL的解决方式。

    今天使用Chrome浏览器,总是报这样一个错误: Uncaught TypeError: Cannot read property 'canvas' of null. 细看之下是无法获取WebGL上下 ...

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

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

  5. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. chrome下positon:fixed无效或抖动的解决办法

    先来看一下我们要实现的效果 我想这种效果大家都有实现过,或者说吸顶的效果和这差不多 页面结构 js代码如下 /*吸顶*/ var $child = $("#child_3"); v ...

  7. 解决IE6下Position:fixed问题(只用css)

    在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...

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

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

  9. IE6的position:fixed

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

随机推荐

  1. handler.postDelayed()和timerTask

    public static void scrollToListviewTop(final XListView listView) { listView.smoothScrollToPosition(0 ...

  2. 统一横轴墨卡托投影(UTM)

    UTM 坐标系统使用基于网格的方法表示坐标.UTM 系统将地球分为 60 个区,每一个区基于横轴墨卡托投影.画图法中的地图投影方法能够在平面中表示一个两维的曲面,比如一个标准地图.图 1 展示了一个横 ...

  3. RESTFul Shiro

    RESTFul与服务没有关系?REST的本质是设计风格,不是技术. REST的URL还是个URL,就是个普通的URL,访问这个URL的时候,先被Servlet Filter(即Shiro 的Filte ...

  4. WebStorm开发Nodejs环境搭建,包括破解最新的WebStom11破解

    先放上链接:http://pan.baidu.com/s/1eQUJZGm 文件内包含注册码和WebStom11安装包,希望能够帮助到大家,少些周折

  5. perl 当前包会覆盖父类的同名方法

    12.5.2 访问被覆盖的方法: 当一个类定义一个方法,那么该子过程覆盖任意基类中同名的方法. [root@wx03 test]# cat Horse.pm package Horse; our @I ...

  6. 图解单片机8位PWM、16位PWM中“位”的含义!

    今天 发现很多同学 搞不懂单片机的pwm中的位表示什么意思,如很多同学会问“8位pwm.16位pwm是什么意思啊,它们有什么区别啊,其中的‘位’表示什么意思啊”.对于这些问题,今天就给大家解释下,由于 ...

  7. [放松一下] 经典高清电影合集 170G BT种子下载

    经典高清电影合集 170G BT种子下载 点击文件名下载 经典高清电影合集170G BT种子.torrent 下载方法 经典高清电影合集详情见目录: 1. 杀手47 2. 这个杀手不太冷 3. 放牛班 ...

  8. EasyUI - DataGrid 组建 - [ 排序功能 ]

    效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...

  9. 技术回归01-Windows内存分配工具

    很久没有写技术方面的东西了,这半年主要是在学习别人的东西,对自己提高比较大,算是一次技术回笼吧,这次学习之旅目的是结束技术方面的专注,开始向应用方面找突破口,也就是完成技术积累或者为技术的积累做坚实的 ...

  10. 由href return false 来看阻止默认事件

    很多时候我们都想阻止一个a ?link的href跳转. 1 <a onclick=” return false ;” href=”www. 360 .cn”>click</a> ...