在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化。

一般我们会使用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;的问题的更多相关文章

  1. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  2. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  3. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  4. js完美解决IE6不支持position:fixed的bug

    详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...

  5. 解决IE6不支持position:fixed的bug

    /*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...

  6. IE6不支持position:fixed的解决方法

    解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

  7. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  8. 修正IE6不支持position:fixed的bug(转)

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  9. 让IE6也支持position:fixed

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...

随机推荐

  1. UVa 101 The Blocks Problem Vector基本操作

    UVa 101 The Blocks Problem 一道纯模拟题 The Problem The problem is to parse a series of commands that inst ...

  2. loadrunner11录制不成功解决方法

    问题一:loadrunner11录制时events为0的解决办法  刚安装好的11.0,系统环境是:WIN7+IE11+LR11 1.ie去掉工具—internet选项中->高级—>去掉“ ...

  3. memcached/redis安全性

    最近看到说redis,memcached服务器安全的问题,想想也是,使用这两种服务N年了,由于历史问题吧,工作中基本是以memcached为主,后来才慢慢引入运用redis.由于memcached是没 ...

  4. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  5. HDU1028Ignatius and the Princess III母函数入门

    这个题也能够用递归加记忆化搜索来A,只是因为这题比較简单,所以用来做母函数的入门题比較合适 以展开后的x4为例,其系数为4,即4拆分成1.2.3之和的拆分数为4: 即 :4=1+1+1+1=1+1+2 ...

  6. Quartz 代码调用Demo

    一般项目中Quartz都是直接在配置文件中配置,但是一些特殊的情况需要在代码中控制,本文为代码调用的Demo,仅供参考.更多详细的Quartz配置信息,请查看: JAVA定时任务实现的几种方式 mav ...

  7. 微信小程序在当前页面设置其他页面的数据

    如果其他页面用到的数据是 globalData, 那么直接在当前页面修改 globalData 数据即可. 如果其他页面用到的数据是 storage, 那么直接在当前页面修改 storage 数据即可 ...

  8. C语言 &#183; 陶陶摘苹果

    算法提高 陶陶摘苹果   时间限制:1.0s   内存限制:256.0MB      问题描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出n个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个3 ...

  9. 【七】ab压测

    [任务7]ab压测 安装ab压测软件 命令:yum -y install httpd-tools 进行压力测试: 执行命令:ab -c 20 -n 5000 http://192.168.159.30 ...

  10. 深入理解JVM 垃圾收集器(上)

    HotSpot虚拟机中的垃圾收集器 GC评价标准 GC调优 响应时间 吞吐量 1.新生代收集器 Serial收集器 ParNew收集器 Parallel Scavenge收集器 2.老年代收集器 Se ...