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 閱讀(911)
評論(0) 編輯 收藏 所屬分類:
web前端