IE 6 有幾個(gè)臭名昭著的bug。 如 line-height，png透明，還有固定定位（position:fixed）等等。
今天跟大家分享的是處理IE 6下不支持 positon:fixed 的bug：
今天看到 有趣網(wǎng)（http://www.uqude.com/） 右下角有個(gè)提示框，我使用過(guò)程中，不但發(fā)現(xiàn)其講固定定位處理的非常好，而且考慮了跨瀏覽器，還有避免了以前常出現(xiàn)的拖動(dòng)滾動(dòng)條時(shí)候，抖動(dòng)的效果。
上代碼：
<!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>
其中解釋兩點(diǎn)：
1. *html{ background-image:url(about:blank);background-attachment:fixed;}
顯然IE有一個(gè)多步的渲染進(jìn)程。當(dāng)你滾動(dòng)或調(diào)整你的瀏覽器大小的時(shí)候，它將重置所有內(nèi)容并重畫(huà)頁(yè)面，這個(gè)時(shí)候它就會(huì)重新處理css表達(dá)式。這會(huì)引起一個(gè)丑陋的“振動(dòng)”bug，在此處固定位置的元素需要調(diào)整以跟上你的(頁(yè)面的)滾動(dòng)，于是就會(huì)“跳動(dòng)”。
解決此問(wèn)題的技巧就是使用background-attachment:fixed為body或html元素添加一個(gè)background-image。這就會(huì)強(qiáng)制頁(yè)面在重畫(huà)之前先處理CSS。因?yàn)槭窃谥禺?huà)之前處理CSS，它也就會(huì)同樣在重畫(huà)之前首先處理你的CSS表達(dá)式。這將讓你實(shí)現(xiàn)完美的平滑的固定位置元素！
無(wú)需一個(gè)真實(shí)的圖片！你可以使用一個(gè)about:blank替代一個(gè)spacer.gif圖片，而且它工作的同樣出色。
2. document.documentElement.scrollTop + document.body.scrollTop
IE對(duì)盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對(duì)于盒模型的解釋和其他的標(biāo)準(zhǔn)瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認(rèn)又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當(dāng)前的文檔渲染方式。
document.compatMode正好派上用場(chǎng)，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。瀏覽器客戶區(qū)寬度是document.body.clientWidth;CSS1Compat：標(biāo)準(zhǔn)兼容模式開(kāi)啟。 瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
那么寫(xiě)了個(gè)準(zhǔn)確獲取網(wǎng)頁(yè)客戶區(qū)的寬高、滾動(dòng)條寬高、滾動(dòng)條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 因?yàn)榭傆幸粋€(gè)是等于0的。這樣也不用判斷模式。
posted on 2011-03-28 00:48
-274°C 閱讀(911)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
web前端