跨浏览器的CSS固定定位

网络整理 - 07-26

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

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

实现代码如下:

"">

……

/*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解决方案:

"">

……

……

{position:fixed}

代码演示3(单个IE,纯粹通过条件注释区分IE浏览器)

代码演示4(多个IE,通过条件注释+CSS hack区分IE浏览器)

对比两个纯粹的CSS hack发现,两个原理似乎相同,在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上,但是这实际上是一种Hack,基本上不具备通用性,知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度,它的大小都始终充满整个浏览器的可视区域,而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域.

或许有人会想,现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题,这下爽了,但是加上XML Prolog后突然发现IE6处于Quriks模式,以前在standards-compliant模式下的设计又变形了,呵呵,这就是咱们搞IE的下场。