陈晓娟 袁惟仁:跨浏览器的CSS固定定位{position:fixed} @ 随网之舞
来源:百度文库 编辑:九乡新闻网 时间:2024/07/14 08:49:56
跨浏览器的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为标准。
实现代码如下:
......IE6中利用容器对溢出内容的处理方式来实现的......{position:fixed}
代码演示1(单个IE,纯粹通过条件注释区分IE浏览器)
代码演示2(多个IE,通过条件注释+CSS hack区分IE浏览器,明显的比纯粹条件注释复杂且不易读,放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果,下同。)
或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XMLProlog(如:),但此时IE7以下都处于Quirks(兼容)模式,所以上述针对IE6的Hack失效,这个时候你可以对IE6也通过expression来实现。
当IE6处于quriks模式时,IE6和IE5.5对CSS解析方式几乎雷同,所以当看到《position:fixed for Internet Explorer》时,我找到了在Quirks模式下IE6/IE5.5/IE5统一的CSS解决方案:
............{position:fixed}
跨浏览器的CSS固定定位{position:fixed} @ 随网之舞
Fixed Position之IE条件注释解决方案 @随网之舞
css层的定位position、absolute、relative层叠加的五条叠加法则
请教CSS中的position:relative;的作用
Div+CSS规则整理之七-浏览器的兼容性问题
position:relative; 他的意思是绝对相对定位
CSS对浏览器器的兼容性
CSS对浏览器器的兼容性22
Css处理负数需要position的配合【及IE6CSS负数遮挡处理】
CSS浏览器兼容汇总 - 做最好的自己 - CSDN博客
兼容IE6浏览器常用的十条CSS代码
整理最全的CSS浏览器兼容问题及解决方案
css元素定位
CSS图片(png)定位
div+CSS浏览器兼容问题整理
css样式设计时快速定位bug的几个好方法-CSS在线
CSS中背景图片定位方法
使用CSS固定html:text 和html:password的宽度 - 技术博客 - 博客大巴
回答读者提问(19)——再谈浏览器的兼容性 - CSS,Javascript,jQuery...
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转)
区别不同浏览器,CSS hack写法
[组图]div+css进行页面布局时定位的思考
IE6 IE7 IE8 opera等浏览器唯一识别CSS标识
CSS浏览器兼容问题(IE6.0、IE7.0 与 FireFox)