zoukankan      html  css  js  c++  java
  • 跨浏览器的CSS固定定位{position:fixed}

    原文链接:跨浏览器的CSS固定定位{position:fixed}

     通过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为标准。

    实现代码如下:


     

    或许有人像我一样,在!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解决方案:


     

    对比两个纯粹的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的下场。

  • 相关阅读:
    浅析什么是HOOK
    用diff命令生成Patch,用Patch命令打Patch
    Git 协作:Fetch Pull Push Branch Remote Rebase Cherry-pick相关
    apt-get update 101错误解决办法
    Python函数参数中的冒号与箭头
    Python中的多线程编程,线程安全与锁(二)
    使用pdb模块调试Python
    Python中的多线程编程,线程安全与锁(一)
    聊聊Python中的GIL
    Python中的单元测试模块Unittest快速入门
  • 原文地址:https://www.cnblogs.com/bdstjk/p/2519869.html
Copyright © 2011-2022 走看看