登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>网页制作>>网站设计原则>>让HTML固定在浏览器的某个--CSS{position:fixed}
让HTML固定在浏览器的某个--CSS{position:fixed}
来源: ‖ 作者: ‖ 点击: ‖ 时间:12-04-09 14:18:53 ‖ 【 】‖ 我要投稿
当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过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为标准。

实现代码如下:




......

IE6中利用容器对溢出内容的处理方式来实现的




......

{position:fixed}

(单个IE,纯粹通过条件注释区分IE浏览器)

(多个IE,通过条件注释+CSS hack区分IE浏览器,明显的比纯粹条件注释复杂且不易读,放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果,下同。)

或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XML Prolog(如:),但此时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}

|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:display属性行内元素和块级元素
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论