解决不同分辨率下浮动div层位置问题

来源：互联网发布：yum安装软件原理编辑：程序博客网时间：2024/04/29 12:39

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