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 阅读(893) 评论(0)  编辑  收藏 所属分类: web前端

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 908980
  • 排名 - 40

最新评论