广东福建浙江江苏上海北京山东辽宁江西河南四川湖北湖南广西安徽黑龙江天津重庆吉林河北贵州甘肃山西云南新疆宁夏海南陕西西藏青海内蒙古

新闻中心

CSS固定定位
发布时间:2014-10-11 23:27:32

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

IE7、Firefox、Opera,都支持CSS的,所以很容易实现(《详解定位与定位应用》)
IE6不支持该属性,但是在使用!DOCTYPE 声明指定standards-compliant(标准)模式可以通过CSS hack实现
上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案,但是可以通过IE特有的expression在CSS中实现(移动网页时固定元素会动),这和常见浮动Logo广告利用Javascript实现原理是一样的,只不过可以直接写在CSS中比较简便的
利用IE独有的条件注释语句可以针对不同的IE版本精确设置,同时避免了这些代码被其他浏览器读到,个人认为比纯粹的CSS Hack好,如果你安装了多个IE(包括绿色版本),条件注释将会以最高版本的IE为标准。
实现代码如下:

"">


......

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




......




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

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

或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XML Prolog(如:),但此时IE7以下都处于quriksQuirks(兼容)模式,所以上述针对IE6的Hack失效,这个时候你可以对IE6也通过expression来实现。

当IE6处于quriks模式时,IE6和IE5.5对CSS解析方式几乎雷同,所以当看到《position:fixed for Internet Explorer》时,我找到了在quriksQuirks模式下IE6/IE5.5/IE5统一的CSS解决方案:


"">


......



......




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

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

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

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


相关说明: 您可以通过电话:020-85421558 与我们联系,我们会根据您所从事的行业领域和网站类型,在最短的时间内请我们的营销顾问与您预约后上门拜访您,直接面谈交流为您解答所有的网站建设疑问。
上一篇:全面了解CSS内置颜色(color)值       下一篇:CSS欺骗,让背景不能滚动

提供全国各地网站建设服务

上海北京深圳广州天津南京大连杭州沈阳成都东莞济南佛山无锡长沙武汉宁波长春苏州青岛珠海大庆福州厦门常州郑州烟台西安合肥南宁重庆东营昆明威海中山南昌绍兴太原惠州温州徐州扬州淄博镇江鞍山保定银川南通洛阳嘉兴台州桂林贵阳兰州盘锦漳州黄石唐山潍坊湘潭肇庆吉林江门海口株洲泉州泰州包头柳州德州韶关宝鸡金华盐城新乡十堰廊坊玉溪济宁沧州芜湖湖州梧州泰安安阳辽阳舟山梅州常德三明连云港哈尔滨秦皇岛马鞍山石家庄呼和浩特

 
备案系统认证 举报不良网站 我们的支付方式 AAA级信用
广州万户网络信息科技有限公司 旗下网站建设品牌:万户网 www.ttn8.com 版权所有 ©2000-2019 All Rights Reserved
网站备案编号:粤ICP备15049595号 地址:广州市番禺区大石街北联围仔工业路2号E座305
电话:020-85421558   传真:020-88140140   邮编:510515