实现 IE6 支持 position fixed 的 CSS 属性

众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著。

如何让 position:fixed 在 IE6 中工作的?

本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。

如何解决“振动”的问题?

显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重新渲染页面,这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

解决此问题的技巧就是使用 background- attachment:fixed 为 body 或 html 元素添加一个 background-image 。这就会强制页面在重画之前先处 理 CSS 。因为是在重画之前处理 CSS ,它也就会同样在重画之前首先处理你的 CSS 表达式。这将让你实现完美的平滑的固定位置元素!

我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个 about:blank 替代一个 spacer.gif 图片,而且它工作的同样出色。

 

/*让position:fixed在IE6下可用! *//* 头部固定 */.fixed-top{position:fixed;bottom:auto;top:0px;}/* 底部固定 */.fixed-bottom{position:fixed;bottom:0px;top:auto;}/* 左侧固定 */.fixed-left{position:fixed;right:auto;left:0px;}/* 右侧固定 */.fixed-right{position:fixed;right:0px;left:auto;}/* 上面的是除了IE6的主流浏览器通用的方法 *//* 修正IE6振动bug */* html, * html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 头部固定 */* html .fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */* html .fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));}/* IE6 底部固定  */* html .fixed-bottom{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)));}/* IE6 左侧固定 */* html .fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}<strong>

 

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9 <title>实现 IE6 下支持 position-fixed 的 CSS 属性</title>
10 
11 <style type="text/css">
12 
13 * html, * html body {
14 
15 background-image:url(about:blank);
16 
17 background-attachment:fixed;
18 
19 }
20 
21 * html .fixed {
22 
23 bottom:auto;
24 
25 position:absolute;
26 
27 right:0;
28 
29 top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
30 
31 }
32 
33 .fixed {
34 
35 bottom:0;
36 
37 position:fixed;
38 
39 right:0;
40 
41 }
42 
43 </style>
44 
45 </head>
46 
47 <body>
48 
49 <div style="height:950px;">&nbsp;</div>
50 
51 <div class="fixed">我管你怎么滚,我就是雷打不动,哈哈哈。</div>
52 
53 </body>
54 
55 </html>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测试百解

1、问&#xff1a;你在测试中发现了一个bug&#xff0c;但是开发经理认为这不是一个bug&#xff0c;你应该怎样解决&#xff1f; 首先&#xff0c;将问题提交到缺陷管理库里面进行备案。 然后&#xff0c;要获取判断的依据和标准&#xff1a; 根据需求说明书、产品说明、设计文…

python中re.split_Python: str.split()和re.split()的区别

str.split() 单一分隔符&#xff0c;使用str.split()即可 str.split不支持正则及多个切割符号&#xff0c;不感知空格的数量 re.split() 多个分隔符&#xff0c;复杂的分隔情况&#xff0c;使用re.split 原型&#xff1a; re.split(pattern, string, maxsplit0) 通过正则表达式…

怎么下载并安装python_怎么下载官网python并安装

怎么下载官网python并安装&#xff1f;百度搜索Python官网。看到上图显示官网的没&#xff0c;点击进入。把鼠标移到downloads上&#xff0c;然后看到下拉选项&#xff0c;点击Windows。然后看到如下界面。这么多的安装包&#xff0c;该选那个呢。下图画圈的是版本号&#xff0…

全国计算机等级考试题库二级C操作题100套(第12套)

第12套&#xff1a; 给定程序中&#xff0c;函数fun的功能是将不带头结点的单向链表逆置。即若原链表中从头至尾结点数据域依次为:2、4、6、8、10&#xff0c;逆置后&#xff0c;从头至尾结点数据域依次为&#xff1a;10、8、6、4、2。请在程序的下划线处填入正确的内容并把下划…

匿名函数python_基于python内置函数与匿名函数详解

内置函数 Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() divmod() id() object() sorted() ascii() enumerate() input() oct() staticmethod() bin() eval() int() open() str() bool() exec() isinstance() pow() super()…

ASP.NET AJAX(服务器回调)

如果只用纯粹的 js &#xff0c;你必须弥补 ASP.NET 服务器端抽象和有限的 HTML DOM 之间的鸿沟&#xff0c;这不简单&#xff0c;没有 VS 的智能提示和调试工具&#xff0c;编写无错的代码和诊断错误都非常困难。由于各种突发事件及实现的差异&#xff0c;编写能够在所有现代浏…

一行代码开启 Winform 中的 ListView 和 DataGridView 双缓冲功能

ListView 中的 DoubleBuffered 属性是 protected 的&#xff0c;外部不能直接修改&#xff0c;但实际使用中&#xff0c;我们一般都需要开启双缓冲来避免控件闪烁。 网上很多人都是通过自定义 ListView 来实现的&#xff0c;虽然也不复杂&#xff0c;但其实用反射是更简单的办法…

全国计算机等级考试题库二级C操作题100套(第13套)

第13套&#xff1a; 给定程序中,函数fun的功能是将带头节点的单向链表结点数据域中的数据从小到大排序。即若原链表结点数据域从头至尾的数据为&#xff1a;10、4、2、8、6&#xff0c;排序 后链表结点数据域从头至尾的数据为&#xff1a;2、4、6、8、10。 请在程序的下划线处填…

git版本回退命令_Git学习版本回退和管理文件的修改及删除操作

版本回退前面我们成功的提交了一次mygit.txt&#xff0c;下面咱对它进行修改&#xff0c;内容如下&#xff1a;Hello GitGit is so easy.然后用git status来跟踪该文件的状态&#xff1a;可以看到hellogit.txt已经被修改过了&#xff0c;到底这次修改的内容与上次的内容有什么不…

如此理解面向对象编程

从Rob Pike 的 Google上的一个推看到了一篇叫《Understanding Object Oriented Programming》的文章&#xff0c;我先把这篇文章简述一下&#xff0c;然后再说说老牌黑客Rob Pike的评论。 先看这篇教程是怎么来讲述OOP的。它先给了下面这个问题&#xff0c;这个问题需要输出一段…

node 版本升级_Node-RED: 自动化事件触发工具的安装与介绍

Node-RED 介绍Node-RED 是一种基于流程的编程工具由 IBM 的新兴技术服务团队原创开发Node-RED 是一种事件触发工具&#xff0c;和 StackStorm 类似, 可以归类为上层的自动化工具&#xff0c;可以用来触发与之相对应的下层自动化工具&#xff0c;比如 ansible&#xff0c;来更加…

用Python写网络爬虫pdf

下载地址&#xff1a;网盘下载 作为一种便捷地收集网上信息并从中抽取出可用信息的方式&#xff0c;网络爬虫技术变得越来越有用。使用Python这样的简单编程语言&#xff0c;你可以使用少量编程技能就可以爬取复杂的网站。 《用Python写网络爬虫》作为使用Python来爬取网络数据…

python处理mysql数据结构_python环境下使用mysql数据及数据结构和二叉树算法(图)...

python环境下使用mysql数据及数据结构和二叉树算法(图)&#xff1a;1 python环境下使用mysql2使用的是 pymysql库3 开始-->创建connection-->获取cursor-->操作-->关闭cursor->关闭connection->结束45 代码框架6 import pymysql.cursors7 ###连接数据库8 con…

全国计算机等级考试题库二级C操作题100套(第14套)

第14套&#xff1a; 给定程序中, 函数fun的功能是用函数指针指向要调用的函数,并进行调用。 规定在__2__处使f指向函数f1&#xff0c;在__3__处使f指向函数f2。当调用正确时&#xff0c;程序输出: x15.000000, x23.000000, x1x1x1x240.000000 请在程序的下划线处填入正确的内容…

2012.12.26日学习笔记

DNS架构由根&#xff0c;最高层域&#xff0c;第二层域&#xff0c;子域的树状结构构成 FQDN: FULLY QUALIFIED DOMAIN NAME:WWW.SAYMS.COM可以在POWERSHELL内使用HOSTNAME查看主机名称&#xff0c;就是FQDNDNS服务器分为授权服务器&#xff0c;主服务器&#xff0c;辅助服务器…

大数据工作流_大数据和人工智能时代下的数字化工作流

点击上方“Bentley软件”可以订阅哦本文作者Bentley 软件公司高级技术经理赵顺耐大数据、人工智能以及与之相伴相生的物联网已经成为现代社会的运行方式&#xff0c;信息技术的急速发展&#xff0c;和数据量爆炸式增长&#xff0c;改变了整个社会传统的运行方式。人类与信息技术…

00x1 python分支循环

三大结构 顺序分支循环分支 分支的基本语法 if 条件表达式&#xff1a; 语句1语句2语句3......条件表达式就是计算结果必须为布尔值的表达式表达式后面的冒号不能少注意if后面的出现的语句&#xff0c;如果属于if语句块&#xff0c;则必须同一个锁紧等级条件表达式结果为True执…

多租户系统技术实现mysql_SaaS “可配置”和“多租户”架构的几种技术实现方式...

1、数据存储方式的选择多租户(Multi-Tenant )&#xff0c;即多个租户共用一个实例&#xff0c;租户的数据既有隔离又有共享&#xff0c;说到底是要解决数据存储的问题。常用的数据存储方式有三种。方案一&#xff1a;独立数据库一个Tenant&#xff0c;一个Database“的数据存储…

全国计算机等级考试题库二级C操作题100套(第15套)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

iOS如何判断当前网络的运营商

2019独角兽企业重金招聘Python工程师标准>>> 在IOS上存在retain屏&#xff0c;经常需要在一些时刻用到高清图&#xff0c;有些时候也要到普通图。 在网络条件很爽的情况下&#xff0c;这当然不在话下。如果咱是iphone用户&#xff0c;又正好用的是移动卡。 如果还用…