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

最新推荐文章于 2022-04-20 13:07:13 发布

恋风的鸟

最新推荐文章于 2022-04-20 13:07:13 发布

阅读量1k

点赞数

分类专栏： Web开发文章标签： IE6 火狐分辨率 jquery

本文链接：https://blog.csdn.net/cqycqy/article/details/8876436

版权

Web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

恋风的鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决不同分辨率下浮动div层位置问题

最近在开发玩课网站的时候，首页顶上设计了几个浮动层，刚开始在IE6和7下测试时是正常的，后来换到火狐下变不正常了，调整了兼容性问题后，火狐也正常了，但偶尔总会发现还有不正常现象，当时未想到是分辨率问题，后来几台电脑一起测的时候才注意到，这里面既有兼容性问题，也有分辨率问题，找到问题的症结后，就可以有相应的解决办法，就是采用JS动态处理，这里采用了JQuery，这里简单记一下处理过程。
复制链接

扫一扫