最近在開發玩課網站的時候，首頁頂上設計了幾個浮動層，剛開始在IE6和7下測試時是正常的，後來換到火狐下變不正常了，調整了相容性問題後，火狐也正常了，但偶爾總會發現還有不正常現象，當時未想到是分辨率問題，後來幾台電腦一起測的時候才注意到，這裡面既有相容性問題，也有分辨率問題，找到問題的症結後，就可以有相應的解決辦法，就是采用JS動态處理，這裡采用了JQuery，這裡簡單記一下處理過程。
首先需要知道IE6、7和其他浏覽器都不同，他們的padding-left是相對的，能夠相對左邊的浮動div進行計算的，而其他浏覽器是根據螢幕左邊距來計算的，是以可以在CSS裡預設設定IE6，7的樣式，其他浏覽器則采用JS計算。如果想看最終效果可以在www.wanke001.com頁面上看一下，下面是具體的參考代碼。
//頁面加載時調用 $(document).ready(function () {
SetBottomNav();
})
function SetBottomNav() {
if (screen.width > 1024) {
var left = $(".main_01 .left").offset().left;
var w = 230 + left - 8; //非IE浏覽器
if (navigator.userAgent.indexOf("MSIE") < 0) {
$("#bottomNav").css("padding-left", w + "px");
}
else {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
} //隻處理IE8及以上的
if (rv >= 8.0)
$("#bottomNav").css("padding-left", w + "px");
}
}
} 然後在body的onresize中調用，解決視窗大小變化時也能夠自動調整
<body onresize="SetBottomNav();"> ![ZeroClipboard2.2.0版本跨浏覽器複制（兼解決IE下相容問題）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)