IE 6 有几个臭名昭著的bug。 如 line-height，png透明，还有固定定位（position:fixed）等等。
今天跟大家分享的是处理IE 6下不支持 positon:fixed 的bug：
今天看到 有趣网（http://www.uqude.com/） 右下角有个提示框，我使用过程中，不但发现其讲固定定位处理的非常好，而且考虑了跨浏览器，还有避免了以前常出现的拖动滚动条时候，抖动的效果。
上代码：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.test
{
background-color:red;
border: 1px solid #000;
position:fixed;
bottom:0;
right:0;
height: 100px;
width: 310px;
overflow: hidden;
padding-bottom: 1px;
}
</style>
</head>
<body>
<!--[if lte IE 6]>
<style type="text/css">
*{margin:0;padding:0;}
html{height:100%;position:relative;}
*html{ background-image:url(about:blank);background-attachment:fixed;}
body{position:relative;height:100%;}
.test{position:absolute;
_top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) - 1
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight) - 1);
}
</style>
<![endif]-->
<div class="test">test</div> <p>affffffffffffffffffffffffffffffffffffffff</p> <p>affffffffffffffffffffffffffffffffffffffff</p> <p>affffffffffffffffffffffffffffffffffffffff</p> <p>affffffffffffffffffffffffffffffffffffffff</p> <p>affffffffffffffffffffffffffffffffffffffff</p>
<body>
</html>
其中解释两点：
1. *html{ background-image:url(about:blank);background-attachment:fixed;}
显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！
无需一个真实的图片！你可以使用一个about:blank替代一个spacer.gif图片，而且它工作的同样出色。
2. document.documentElement.scrollTop + document.body.scrollTop
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。
BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;CSS1Compat：标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else {
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft: document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop: document.documentElement.scrollTop;
}
我们也看到了要获取scrollTop ，还真可以 document.documentElement.scrollTop + document.body.scrollTop 因为总有一个是等于0的。这样也不用判断模式。
posted on 2011-03-28 00:48
-274°C 阅读(901)
评论(0) 编辑 收藏 所属分类:
web前端