跨浏览器的CSS固定定位{position:fixed} css
不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，能够点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感受它怎么样？这就是经过CSS的定位属性{position:fixed}来实现的，经过它可让HTML元素脱离文档流固定在浏览器的某个位置。 html
IE七、Firefox、Opera，都支持CSS的{position:fixed}，因此很容易实现（《详解定位与定位应用》） web
IE6不支持该属性，可是在使用!DOCTYPE 声明指定standards-compliant（标准）模式能够经过CSS hack实现 express
上述声明下IE5和IE5.5目前没有发现经过纯粹CSS可以解决的方案，可是能够经过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是同样的，只不过能够直接写在CSS中比较简便的 浏览器
利用IE独有的条件注释语句能够针对不一样的IE版本精确设置，同时避免了这些代码被其余浏览器读到，我的认为比纯粹的CSS Hack好，若是你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准。 app
实现代码以下： post
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ui
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> spa
<html xmlns="http://www.w3.org/1999/xhtml"> 设计
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 针对IE七、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如下都处于Quirks（兼容）模式，因此上述针对IE6的Hack失效，这个时候你能够对IE6也经过expression来实现。
当IE6处于quriks模式时，IE6和IE5.5对CSS解析方式几乎雷同，因此当看到《position:fixed for Internet Explorer》时，我找到了在Quirks模式下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处于Quirks模式，之前在standards-compliant模式下的设计又变形了，呵呵，这就是我们搞IE的下场。