IE6-css中js解决固定定位
2012-07-25 17:17
375 查看
首先要理解css中的js是什么样子的!
top:expression(这里写的是js代码);在括弧中的是js代码 注:这种方法对浏览器资源要求比较的高
例:
如果想要把一个高100px宽100px的div放在浏览器的中间那么我们需要写一条公式
可视区到页面实际顶部的距离 + ( 可视区高度/2 - 当前对象高度/2)
在IE6浏览器中因为IE6的渲染模式是每当改变一次浏览器内容位置的时候页面会重新加载css并重新计算所以我们在移动IE6中内容的时候常常会看见卡顿的现象
解决方法:
页面实例:
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>
相关文章推荐
- CSS,实现IE6固定定位及解决"抖动"的原理
- expression解决IE6下固定定位的兼容
- 解决 IE6 position:fixed 固定定位问题
- expression解决IE6下固定定位的兼容
- 解决PNG图片在IE6中背景不透明的CSS与JS代码
- 解决 IE6 position:fixed 固定定位问题(div固定,不随着滚动条滚动)
- 解决IE6浏览器下position:fixed固定定位问题
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- position:fixed 固定定位(兼容IE6)问题及关闭浮动框的JS
- 返回顶部(解决IE6固定定位)
- expression解决IE6下固定定位的兼容
- 解决IE6浏览器下position:fixed固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- 解决IE6下固定定位问题 使用position:fixed
- 两种解决IE6不支持固定定位的方法
- 解决 IE6 position:fixed 固定定位问题
- cssIE6解决无法实现position:fixed浮动层固定在滚动页面(无抖动)
- 解决PNG图片在IE6中背景不透明的CSS与JS的代码
- js,css三种方法解决IE6下position:fixed的Bug以及闪动问题