IE6中position导致页面变形及窗口缩放修复方案

作者:小满时间:2026-10-25 18:33:38浏览:477

本文针对IE6浏览器中position属性引发的页面布局错位及窗口缩放时内容变形问题,提供了一套基于jQuery的修复方案。通过监听window.onresize事件,动态计算内容区左侧空白宽度与窗口总宽度的差值,并重新设置导航元素的left值,从而在窗口大小改变时保持页面布局的稳定与对齐。

如图所示:

IE6页面变形修复方案


IE6页面变形修复方案

解决方案:


1.在缩放窗体时,首先获取内容区左侧的空白宽度。


利用$("#nav").offset().left;获取内容区左侧的空白宽度。


2.获取整个窗体的宽度(注意:以桌面分辨率为基准,若不足需加上相应数值)。


3.用桌面分辨率的宽度减去页面内容区的宽度后除以2,即可得到一侧多余的宽度。


4.如果计算得到的值与$("#nav").offset().left;获取的值不同,则调整使两值保持一致。


代码如下:

 
var ietest=function()
{ 
if ($.browser.msie) {
if ($.browser.version == "6.0")
{ 
var _width=document.documentElement.clientWidth+29; //桌面分辨率大小
$("#nav").css("left",((_width-950)/2)-15); //重新设置值
return false;
} 
return false;
} 
return false;
} 
window.onresize=ietest; //缩放窗体时触发事件
作者最新文章