IE6下position:fixed不支持问题及其解决方式
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不支持问题及其解决方式的更多相关文章
- IE6下position:fixed;兼容
*html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...
- ie6下position:fixed定位问题
1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...
- Linux下Chrome浏览器不支持WebGL的解决方式。
今天使用Chrome浏览器,总是报这样一个错误: Uncaught TypeError: Cannot read property 'canvas' of null. 细看之下是无法获取WebGL上下 ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- 让IE6兼容position:fixed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- chrome下positon:fixed无效或抖动的解决办法
先来看一下我们要实现的效果 我想这种效果大家都有实现过,或者说吸顶的效果和这差不多 页面结构 js代码如下 /*吸顶*/ var $child = $("#child_3"); v ...
- 解决IE6下Position:fixed问题(只用css)
在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...
- IE6中position:fixed无效问题解决
在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...
- IE6的position:fixed
手头一个项目中,要实现把一个浮层控制在浏览器窗口右下角,用”position:fixed”来控制最合适不过了. 但万恶的IE6不支持这个属性,之前采用过的方法有:将滚动条转移到body上,使用绝对定位 ...
随机推荐
- AlphaMobileControls介绍
大家在开发wince程序或者windows mobile程序时还在为丑陋的界面着急吗?AlphaMobileControls可以帮你解决这些方案.当然如果你是高手可以自己去实现一些特殊的功能,自己定义 ...
- Esper学习之五:EPL语法(一)
上篇说到了Esper的Context,要是不了解的同学请参看<Esper学习之四:Context>,看过的同学如果还是不理解的话可以给我评论,我将会尽可能的解答.之前有些同学问我Conte ...
- android中 System.exit(0)的理解
public class HelloGoodbye{ try{ System.out.println(“Hello World”); System.exit(0); } finally { Syste ...
- C#的事件处理机制
链接地址:http://blog.csdn.net/niuox/article/details/7527876 在以往的关于事件处理的程序中,我们更多的是采用一种循环等待的方式,即为了检测某个事件是否 ...
- 遭遇“HTTP 错误 500.19 无法访问请求的页面,因为该页的相关配置数据无效。”
windows 2008下IIS7 安装ASP.NET 遇到如下错误: HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. ...
- 前端面试题整理(html)
1.<!DOCTYPE>标签的定义与用法. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> ...
- java layout 表格项增加、删除、修改
实现的内容为:点击表格某项,再点击删除钮,可实现删除点击表格某项,再点击编辑按钮,可实现内容改变点击添加按钮,可实现向表格中添加内容 总结:总的来说中间遇到了很多困难,但是都一步步的解决了. pack ...
- EasyUI - ComboBox 下拉组件
效果: html代码: <input id ="comb" name ="comb"/> JS代码: $(function () { $('#com ...
- ASP.NET - 使用 XML
对XML文件进行简单的增加,删除,修改,查看等功能. XML代码: <?xml version="1.0" encoding="UTF-8"?> & ...
- Linux 安装Redis全过程日志
wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make ...