跨浏览器的CSS固定定位{position:fixed}

最新推荐文章于 2024-01-02 16:35:09 发布

iteye_133

最新推荐文章于 2024-01-02 16:35:09 发布

阅读量158

点赞数

分类专栏： Javascript 文章标签： html css ie 浏览器

本文链接：https://blog.csdn.net/iteye_133/article/details/82203299

版权

Javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。
1.IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现（《详解定位与定位应用》）
2.IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现
3.上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的
4.利用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>

文章引用：
http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/

iteye_133

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器的CSS固定定位{position:fixed}

不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。1.IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实...
复制链接

扫一扫

专栏目录