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

CSS样式表
RGBA颜色实现背景颜色透明而文字不透明
不够语义网页设计和语义的网页制作
网站布局剖析实例:网页黄金分割
准确获取指定元素CSS属性值
汇总DIVCSS网页布局及网站设计常犯错误
CSS中的!important属性
用CSS进行网页布局的好处
网页设计CSS技巧汇总
参考:2009年不要制作的几种网站
网页在IE6下正常在IE7下错位的问题
网页在IE6下错位在IE7下正常的问题
Web标准和网站重构只是一种思想
支持Web标准在中国
CSS选择符命名的几个原则
历数CSS缩写的一些好处
远离CSS BUG 尽量保持代码有语义
制作网页评论表单
CSS样式命名规范
CSS样式表书写顺序
CSS样式表注释书写规范

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 144 ::
收藏到网摘: 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>