|
跨浏览器的CSS固定定位{position:fixed} 不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。 IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现。IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现 。 上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的 。 利用IE独有的条件注释语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到，个人认为比纯粹的CSS Hack好，如果你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准。 实现代码如下： 以下为引用的内容：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> …… /*IE6中利用容器对溢出内容的处理方式来实现的*/ …… {position:fixed} | 代码演示1（单个IE，纯粹通过条件注释区分IE浏览器） 代码演示2（多个IE，通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果，下同。） 或许有人像我一样，在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时，喜欢在声明前面加上XML Prolog(如：)，但此时IE7以下都处于quriks（兼容）模式，所以上述针对IE6的Hack失效，这个时候你可以对IE6也通过expression来实现。 当IE6处于quriks模式时，IE6和IE5.5对CSS解析方式几乎雷同，所以当看到《position:fixed for Internet Explorer》时，我找到了在quriks模式下IE6/IE5.5/IE5统一的CSS解决方案： 以下为引用的内容：
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> …… …… {position:fixed} | 代码演示3（单个IE，纯粹通过条件注释区分IE浏览器） 代码演示4（多个IE，通过条件注释+CSS hack区分IE浏览器） | 