IE6-css中js解决固定定位

最新推荐文章于 2022-07-11 19:16:10 发布

liujiajie1990

最新推荐文章于 2022-07-11 19:16:10 发布

阅读量3k

点赞数

分类专栏： IE6常见bug整理文章标签： ie 浏览器 xhtml css url class

本文链接：https://blog.csdn.net/liujiajie1990/article/details/7785488

版权

IE6常见bug整理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先要理解css中的js是什么样子的！

top:expression(这里写的是js代码);在括弧中的是js代码注：这种方法对浏览器资源要求比较的高

例：

top:expression(document.documentElement.scrollTop);

获取浏览器可视区到页面实际顶部的距离

top:expression(document.documentElement.clientHeight);

获取浏览器可视区的高度

top:expression(this.clientHeight);

获取当前对象的高度

如果想要把一个高100px宽100px的div放在浏览器的中间那么我们需要写一条公式

可视区到页面实际顶部的距离 + （可视区高度/2 - 当前对象高度/2）

top:expression(document.documentElement.scrollTop+document.document.clientHeight/2-this.clientHeight/2)

左边距和上边距的写法是一样的

在IE6浏览器中因为IE6的渲染模式是每当改变一次浏览器内容位置的时候页面会重新加载css并重新计算所以我们在移动IE6中内容的时候常常会看见卡顿的现象

解决方法：

body{
    _background-image:url(about:blank);
    _background-attachment:fixed;
}

添加backgrounf-attachment:fixed是为了让浏览器在重新需要布页面的时候先处理css那样就不会产生卡顿的现象

页面实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		_background-image:url(about:blank);
		_background-attachment:fixed;
	}
	.aa{width: 100px;height: 100px; background: red}
	.box{width: 100px;height: 100px; text-align: center;line-height: 100px;
		background: red;
		position: fixed;
		top: 50%;
		left: 50%;
		_position:absolute;
		_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.clientHeight/2);
		_left:expression(document.documentElement.clientWidth/2-this.clientWidth/2);
	}
	</style>
</head>
<body style="height:10000px">
	<div class="box">我居中了哦</div>
</body>
</html>

liujiajie1990

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE6-css中js解决固定定位

首先要理解css中的js是什么样子的！top:expression(这里写的是js代码);在括弧中的是js代码注：这种方法对浏览器资源要求比较的高例：top:expression(document.documentElement.scrollTop);获取浏览器可视区到页面实际顶部的距离top:expression(document.documentElement
复制链接

扫一扫