跨浏览器的CSS固定定位{position:fixed}
作者:秦歌 发布时间:2007-05-11 16:50:00
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉。当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。
IE7、Firefox、Opera,都支持CSS的{position:fixed},所以很容易实现(《详解定位与定位应用》)
IE6不支持该属性,但是在使用!DOCTYPE 声明指定standards-compliant(标准)模式可以通过CSS hack实现
上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案,但是可以通过IE特有的expression在CSS中实现(移动网页时固定元素会动),这和常见浮动Logo广告利用Javascript实现原理是一样的,只不过可以直接写在CSS中比较简便的
利用IE独有的条件注释语句可以针对不同的IE版本精确设置,同时避免了这些代码被其他浏览器读到,个人认为比纯粹的CSS Hack好,如果你安装了多个IE(包括绿色版本),条件注释将会以最高版本的IE为标准。
实现代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
……
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;……} /*针对IE7、Opera、Firefox一行搞定*/
</style>
/*IE6中利用容器对溢出内容的处理方式来实现的*/
<!–[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的,这是设置right:17px的原因*/
</style>
<![endif]–>
<!–[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]–>
</head>
<body>
<div id="wrapper">
……
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html
代码演示1(单个IE,纯粹通过条件注释区分IE浏览器)
代码演示2(多个IE,通过条件注释+CSS hack区分IE浏览器,明显的比纯粹条件注释复杂且不易读,放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果,下同。)
或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XML Prolog(如:<?xml version="1.0" encoding="utf-8"?>),但此时IE7以下都处于quriks(兼容)模式,所以上述针对IE6的Hack失效,这个时候你可以对IE6也通过expression来实现。
当IE6处于quriks模式时,IE6和IE5.5对CSS解析方式几乎雷同,所以当看到《position:fixed for Internet Explorer》时,我找到了在quriks模式下IE6/IE5.5/IE5统一的CSS解决方案:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
……
<!–[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]–>
</head>
<body>
<div id="wrapper">
……
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示3(单个IE,纯粹通过条件注释区分IE浏览器)
代码演示4(多个IE,通过条件注释+CSS hack区分IE浏览器)
对比两个纯粹的CSS hack发现,两个原理似乎相同,在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上,但是这实际上是一种Hack,基本上不具备通用性,知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度,它的大小都始终充满整个浏览器的可视区域,而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域,更多内容请看《IE 中的 html 元素》
或许有人会想,现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题,这下爽了,但是加上XML Prolog后突然发现IE6处于Quriks模式,以前在standards-compliant模式下的设计又变形了,呵呵,这就是咱们搞IE的下场。
作者的blog:http://dancewithnet.com/
猜你喜欢
- 这本入门手册是否合适你?我只想告诉你我非常喜欢这本书。我对Microsoft Access的经验足以让我跳过这本傻瓜系列教材,但是实际情况是
- 在ASP.NET中,如何连接 SQLServer数据库?连接数据库:<%@ Import Namespace=&q
- 作为一个Oracle数据库开发者或者DBA,在实际工作中经常会遇到这样的问题:试图对库表中的某一列或几列创建唯一索引时,系统提示ORA-01
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 这里使用FSO对象来删除指定文件夹 代码和说明如下:<% set fs=createobject(&qu
- 在Dreamweaver 4.0中,我们就已接触了模板与库的概念,知道它们是批量生成风格类似的网页的好工具。如今在Dreamweaver M
- 如何一行行地读取文件?这样就可以做到一行行地读出了:dim input(30) ' 定义一个数组,大小
- 在许多情况下,当迁移至SQL Server 2008之前必须了解那些反对和放弃功能的具体情况。下文是几个主要功能在兼容性上的问题列表:1.S
- 如何在线更改密码?<%id = Request("id")newpassword =
- 引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块
- 经常开发asp但对于细致的说法,真实不太清楚,这里简单的介绍下。一般情况下读取数据都是用rs.open sql,conn,1,1修改数据:r
- 在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离
- 在网络上看到的数字人整合动网论坛的方法都非常不全,站长们都是抄人家的,也不说明可不可用,提供下载的文件也不能下载.现在我提供一些信息。一、整
- 超级简单实现iframe框架滚动控制,前提要会简单修改原代码。step1:插入iframe标签在你想要的位置。<iframe 
- 阅读上一篇:FrontPage2002简明教程一:安装与界面FrontPage中对于文字与图像的处理与Word很相似,用过Word的人对于F
- 遇到一个很实际的问题:由于不想增加目录的深度,减少磁盘寻址的时间,需要减少一些目录层级。大家都知道建立文件夹是为了让文件管理更加的方便,现在
- 首先说说什么是内存泄露,在一个进程中,如果某一块内存无法访问,且直到进程结束为止也无法释放,那么就发生了内存泄露。通常这种情况发生在C++之
- 事物绝非十全十美总有强差人意的一面,之前针对浮动分析了其引起文本重影的怪异问题,而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。围绕着定位