ie6使用expression模拟fixed定位


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

html{

_background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */

}

/* 固定定位图层 */

.fixed {

position:fixed;

_position: absolute;

width: 200px;

height: 200px;

background: red;

top:0;

left: 0;

_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);

_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);

}

</style>

</head>

<body>

<div class="fixed"></div>

<div style="height:1500px"></div>

</body>

</htm>

 

IE5 及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性, 也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。

以top为例:

documentElement.scrollTop   页面滚动条“卷”起来的高度值

documentElement.clientHeight  页面实际高度,包括padding

this.offsetHeight  元素实际高度,包括padding,scrollbar,border

documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight = bottom为0时,如果用top来实现应当取多少值

top:0; = _top:expression(documentElement.scrollTop);

bottom:0; = _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);

left:0; = _left:expression(documentElement.scrollLeft);

right:0; = _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);

注:尽量避免使用这种方式,因为这会产生大量计算,计算量轻松过万,对浏览器性能损耗很大,浏览器极容易死掉。

时间: 2024-11-05 13:36:23

ie6使用expression模拟fixed定位的相关文章

使用absolute模拟fixed定位,兼容ie6,及ie7 8 9和火狐谷歌等浏览器

ie6不支持fixed定位,设定fixed定位后,ie6会认为是错误值,便会使用默认值static,可以使用absolute模拟fixed效果,并且兼容ie 7 8 9以及火狐等. 核心代码:    html,body {        margin: 0;        padding: 0;        height: 100%;    }    html { overflow: hidden; }    body { overflow: auto;}    #demo { positio

关于fixed定位的一些错误看法纠正

之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fixed来模拟fixed定位来解决这个兼容的问题,但是最好的办法还是强制浏览器使用标准模式渲染页面,毕竟这个问题只是在怪异模式下面会出现,使用absolute模拟太麻烦了. <meta http-equiv="X-UA-Compatible" content="edge&qu

解决ie6下不支持fix属性,模拟固定定位

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{marg

解决IE6不支持position:fixed固定定位的bug(转载范鸭)

http://blog.funya.in/csscss3/ie6-fixed-bug/ 在IE6中实现 position:fixed; 的办法: 浏览器头部固定 .fixed_top { position:fixed; top:0px; } * html .fixed_top /* IE6 头部固定 */{ position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop)); } 浏览器

IE6浏览器不支持固定定位(position:fixed)解决方案

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body> <div style="width

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

2010年4月15日 像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求.当其他浏览器都正常显示的时候,只有IE6不那么完美.该元素的位置是通过"left", "top",

如何在IE6下实现position:fixed效果

如何在IE6下实现position:fixed效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.由于IE6并不支持position:fixed,所以导致很多好的效果都无法实现,但是在IE6下并不是不能够实现此中效果,下面就通过一段实例介绍一下如何实现此种效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="autho

解决IE6不支持position:fixed属性

最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式),是一种使用动态设置 CSS 属性的方式,并且被 IE5 以上的版本所支持,但是 IE8 的标准模式已不再支持 CSS 表达式了 IE7和以上的浏览器都支持position:fixed: 之前写过一篇介绍过固定页脚的文字,那时候没在ie6下测试 方法一 <!--[if IE 6]> <styl

让IE6也支持position:fixed

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的.涞水县梁以纸业 如何让position:fixed在IE6中工作呢? 本文所使用的技巧是用了一条InternetExplorer的CSS表达式(expression).你不可以直接使用该表达式,因为它可能会因为缓存而不更新.解决这一点的最简单的方式是使用