IE6浏览器不支持固定定位（position：fixed）解决方案(转)
今天在学习的时候，突然发现在IE6浏览器下，position：fixed不管用了：
代码如下:
<html>
<head>
<title> New Document </title>
</head>
<body>
<div style="width:600px;height:2000px;background-color:#f90;">正常普通流元素</div>
<div style="position:fixed;bottom:10px;left:50px;width:400px;height:200px;background-color:#111;color:#fff;">position：fixed元素</div>
</body>
</html>
上面的代码在IE6中打开，效果如下：
而在其他浏览器（IE7+、firefox、opera、safari、chrome）下则正常显示：
经过多次测试，原来不只在IE6下，在IE7、IE8浏览器下，若是文档使用的是怪异（quirk）模式也会导致这个问题。这也难怪，当IE7、8使用怪异模式时，渲染引擎将以接近IE6的渲染模式来解析CSS。最后，我得出了以下结论：
IE6、IE7（quirk模式）、IE8（quirk模式） 浏览器将 'position' 特性的 fixed 值当作错误值处理。从而导致使用固定定位的元素使用 'position' 的默认值 static。即这个元素在 此时 变成了普通流中的元素，这必然会导致布局错位等问题。
解决方案：
在 IE6、IE7（quirk模式）、IE8（quirk模式）中为固定定位元素设置 '_position:absolute'，再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量，但是我发现只能实现在最底部和最顶部固定。要想设置具体的位置还需要配合_margin。
使元素固定在浏览器的顶部：
代码如下:
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop));
}
使元素固定在浏览器的底部：
代码如下:
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
这两段代码只能实现在最底部跟最顶部，你可以使用 _margin修改其中的数值控制元素的位置。
看到这里，你一定以为已经完事了。NO！还有bug：被固定定位的元素在滚动滚动条的时候会出现一闪一闪的情况。解决这个问题的办法是在 CSS 文件中加入：
代码如下:
background-image:url(about:blank);
background-attachment:fixed;
}
或者：
代码如下:
_background-attachment:fixed;
_background-image:url(about:blank);
}
当然，也可以用吧javascript方法解决，不过有点大材小用：
代码如下:
//code
};
IE6浏览器不支持固定定位（position：fixed）解决方案(转)的更多相关文章
- IE6浏览器不支持固定定位（position：fixed）解决方案
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- 层模型--固定定位(position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...
- 【解决】Android 2.x 不支持overflow、position:fixed解决方案【转】
Android 2.x和IOS5以下都不支持overflow:auto属性(position:fixed也不支持). 移动端浏览器兼容性和PC端相比,有过之而无不及.操作系统版本及各式浏览器和各式的屏 ...
- 让IE6下支持固定定位
让IE下支持固定定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素
"UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...
- 中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...
- 两种解决IE6不支持固定定位的方法
有两种让IE6支持position:fixed1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url(a ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
随机推荐
- ZOJ 3888 Twelves Monkeys
Twelves Monkeys Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...
- query ajax总是进入error回调函数
query ajax总是进入error回调函数今天纠结了1小时,ajax总是进入了error函数中.平时使用从来没有出现过这种现象,纠结了半小时. 最后稍微总结出了点: 1.以前使用都是服务器端输出S ...
- HDU 5172
超内存了,呃...不知道如何优化了. 首先要判断区间的和是否和1~n的和相等. 再个,记录下每个数字前一次出现的位置,求这些位置的最大值,如果小于左端点,则表示有这样的一个序列. 呃~~~第二个条件当 ...
- HDU 3756
很容易就想到把三维转化成了二维,求出点离Z轴的距离,把这个距离当成X坐标,Z轴当Y坐标,然后就变成了求一个直角三角形覆盖这些点 像上一题一样,确定斜率直线的时候,必定是有一点在线上的.于是,可以把直线 ...
- java 递归实现删除或查询指定目录下的全部文件
/** * 递归列举盘符下的全部文件的名称,如E:\HeartIsland * * @author HeartIsland * */ public class FileListDemo { /** * ...
- nyoj-647-奋斗小蜗牛在请客（进制转换）
奋斗小蜗牛在请客 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 一路艰辛一路收获.成功爬过金字塔的小蜗牛别提多高兴了.这不为了向以前帮助他的哥们们表达谢意,蜗牛宴请 ...
- pthread_create()创建线程时传入多个參数
因为接口仅仅定义了一个入參void *arg int pthread_create(pthread_t *tidp,const pthread_attr_t *attr, (void*)(*start ...
- MySQL List分区（三）
具体介绍请看 MySQL分区一 样例:该样例为本人个人学习总结分享
- 创建多线程的HttpClient
在实际的应用中,我们的联网应用程序里应该有一个HttpClient,并将其用于所有的HTTP通信.这就可能在同一个Http Client同时发出多个请求,也就产生了多线程的问题.幸运的是,在HttpC ...
- Memcache相关面试题
1)memcached的cache机制是怎样的? 懒惰算法 +最近最少使用原则 2)memcached如何实现冗余机制? 冗余:就是有好多好多不经常使用的. 可以不用实现冗余机制,如果非要实现.那就搞 ...