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

CSS样式表
关于CSS的一些基础应用
纯CSS实现的无侵入的卡盘(幻灯片)
w3c标准自适应高度height100%不起作用的问题分析
CSS代码组合和嵌套
CSS常用属性缩写实例
CSS代码缩写实例以及CSS缩写原因总结
网页字体大小的设计技巧
CSS3的新特性介绍
DOCTYPE和XHTML的相关认识
DIV CSS建立的符合web标准网页的好处
CSS语法缩写规则
FireFox浏览器和IE浏览器下CSS兼容问题
CSS代码属性分组的写法例子
解决全部网页木马的技巧
css教程:DIV垂直居中的办法
css常用布局多行多列
不同浏览器的CSS Hack写法小结
CSS 控制字符宽度省略号效果 兼容浏览器
纯CSS实现的三级下拉菜单实现代码
快速定位页面中复杂 CSS BUG

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


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