当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 跨浏览器的CSS固定定位

CSS样式表
Pjblog模板制作教程 超强推荐
(X)HTML Strict 下的嵌套规则
BUTTON和INPUT的区别
css 命名规范
各浏览器padding、margin的差异
IE浮动边界BUG延伸探讨
激发你的灵感:50个优秀的Favicons
Lesson01_08 图像地图
Lesson03_01 什么是CSS和CSS的设置方式
[转]Accesskey引起的一点点思考
CSS仿淘宝首页导航条布局效果
Css利用js的expression实现的效果
Web标准学习资源(书籍、网站)推荐
DIV+CSS 滑动门技术的简单例子
给自己的网站制作一个favicon.ico图标的实现方法
100%点击区的滑动门代码
用js实现的DIV+CSS编辑器代码
css条件注释理论及实践源文件
CSS条件注释的使用详解教材
针对浏览器隐藏CSS之独孤九剑

CSS样式表 中的 跨浏览器的CSS固定定位


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 99 ::
收藏到网摘: n/a


本文介绍了跨浏览器的CSS固定定位,请看下面的例子:
<!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>