解决IE6不支持position:fixed;的问题
在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化。
一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以必须对IE6进行”特殊照顾”。
下面的代码是实现:我们想要把元素定位在浏览器的底部
HTML代码
<div class="box"> </div> <div class="content"></div>
CSS代码
.box{ background:#69C; height:60px; width:500px; position:fixed; left:; bottom:; } .content{ height:5000px;/*使内容足够长,方便查看滚屏效果*/ background:#9CF; }
此刻在火狐中已经正常了,接下来为IE6增加一些针对性的代码,在box中加入
_position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
现在IE6中已经实现固定定位的效果了,但是移动滚动条时,会出现闪屏,所以还需要在box中加入
*html{ background-image:url(about:blank); background-attachment:fixed; }
分析
定位的位置left和right可以用绝对定位的方法解决,所以上面加了专门针对IE6的绝对定位
_position:absolute;而 top 跟 bottom 就需要用上面的表达式来实现。
如果想要把box元素定位在浏览器的顶部,只需要修改_top的值,代码如下
_top:expression(eval(document.documentElement.scrollTop));
如果希望box元素不是位于最顶部,也不是位于最底部,你可以使用 _margin-top:30px;或_margin-bottom:30px;修改其中的数值来控制元素的位置。
IE6不支持position:fixed;的问题已经彻底解决了,想要更深入的理解,就多动动手吧!
欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/let-ie6-support-position-fixed.html
解决IE6不支持position:fixed;的问题的更多相关文章
- 解决ie6不支持position: fixed;导致无法滚动的办法
<div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...
- 解决IE6不支持position:fixed属性
最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- js完美解决IE6不支持position:fixed的bug
详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...
- 解决IE6不支持position:fixed的bug
/*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...
- IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- 让IE6也支持position:fixed
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...
随机推荐
- 学习嵌入式Linux有没有一个最佳的顺序(持续更新)
作为一个嵌入式Linux的初学者,我知道我可能将长期处于初学者阶段,因为我至今仍然没有能够摸索出一条很好的道路让我由初学者进入到更高级阶段.但是我始终没有放弃,本篇文章就是用来记录我学习嵌入式Linu ...
- Using Apache2 with JBoss AS7 on Ubuntu
大体思路同<Using Apache Web Server with Jboss AS 7>一致,但在Ubuntu上的操作与之前有些区别. 这里仍然演示mod_proxy的配置. 首先加载 ...
- 在Ubuntu中设置中文输入法
在Ubuntu中设置中文输入法 */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola,&quo ...
- IOS性能调优系列:Analyze静态分析
目前关于IOS性能优化的教程较少,决定写一个<IOS性能调优系列>,主要关注与内存泄漏.性能优化.流量和电量分析几个方面. XCode已经提供了非常强大的性能调优工具,结合几个第三方工具和 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 【Android - MD】之CardView的使用
CardView是Android 5.0新特性--Material Design中的一个布局控件,可以通过属性设置显示一个圆角的类似卡片的视图. 1.CardView的属性: app:cardCorn ...
- MySQL 基础(DDL)
SQL分类 SQL语句主要可以划分为一下3个类别 DDL:数据定义语言,定义数据段.数据库.数据表等 DML :数据操纵语句,用于添加.删除.更新和查询数据库记录 ...
- IE浏览器中发送到onenote的选项没有调出来??
最近使用onenote 作为笔记本,发现这个比word好用很多,特别是还有一个功能很好用,发送到onenote,可以选中网页中的内容,发送到onenote.但是有一些IE浏览器这个选项没有调出来,还是 ...
- MapObject shape数据操作
利用MO 的GeoDataset .DataConnection Recordset 进行数据操作 在MO中.使用GeoDataset对象和DataConnection 对象来连接和读取地理数据. ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...