最近在开发玩课网站的时候,首页顶上设计了几个浮动层,刚开始在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();">