IE、Firefox使用绝对定位(absolote) 网页居中布局支持IE7,8,FF

来源：互联网发布：数据挖掘原理张银奎编辑：程序博客网时间：2024/05/29 19:15

对于企业官网来说，网站要有自己独特的个性，并且，不能使用太“老土”布局办法（使用table布局确实比较省事，但是当页面足够复杂，元素之间位置无序，甚至相互重叠，table就难以满足要求，而且对于一个大企业来说，使用table来控制布局，实在有点拿不上台面），再加上要适应不同分辨率屏幕的需求，布局就变得比较麻烦。

众所周知，使用绝对定位（position:absolute）的方式来布局能有效的处理复杂布局，但它有一个非常令人诟病的地方——在分辨率固定的情况下，绝对定位是网页布局的一大利器，而当要求网站适应不同分辨率时，问题来了，由于上面所有元素的位置是固定的，分辨率太小或太大，它都会偏离屏幕中央，这必然是客户所不能忍受的情况。

前段时间做过一个汽车企业的官网，在这方面有一些小小的收获，做到既能让元素按照自己的要求进行绝对定位，同时，又能让它适应不同分辨率的屏幕，始终在屏幕中央显示出来，并且，发现IE7中绝对定位的一个bug。

用一个简单的case来描述我的办法，这个case的需求是这样的：首先，整个网站固定高度和宽度，在1024*768分辨率内呈现所有的元素，这些元素的布局要求使用绝对定位，但必须保证在各种分辨率下，这块1024*768的显示区域都是居中靠上的。

『思路』

首先，让显示区域居中，无非是让div在页面中居中，网上有很多办法，我采取了其中一种：

    margin-left:auto;    margin-right:auto;

其次，绝对定位是相对于父容器的，所以，如果我们不加任何包装，直接让元素在body内使用绝对定位，那必然会限死它的位置，我的做法是在body上覆盖一层width和height分别为100%的div，接着，创建一个1024*768大小的div相对于这个div居中，第三步，创建一个1024*768大小的绝对定位的div搁置在第二个div上，第四步，在第三个div内，你可以开始随意使用绝对定位的元素了，测试页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>    <style type="text/css">        body        {            margin: 0;            background-color: #EBEFF2;            font-family: Arial,Helvetica,sans-serif;            font-size: medium;        }                #layout-bg        {            width: 100%;            height: 100%;            margin: 0;            text-align: center;            vertical-align: middle;        }                #main-panel        {            width: 1024px;            height: 768px;            margin-left: auto;            margin-right: auto;            background-color: #FDFFEE;        }                #absolute-bg        {            width:1024px;            height:768px;            position:absolute;        }                #d1        {            width:500px;            height:500px;            background:#bdbdbd;            position:absolute;            left:30px;            top:30px;            z-index:8;        }                #d2        {            width:400px;            height:400px;            background:#f2bdb3;            position:absolute;            left:300px;            top:200px;            z-index:7;        }    </style></head><body>    <div id="layout-bg">        <!-- 1027*768窗体居中 -->        <div id="main-panel">            <!-- 绝对定位父容器，大分辨率下，调整IE窗口大小可以看到显示区域跟随窗体变化而移动 -->            <div id="absolute-bg">                <span style="position:absolute; left:100px; top:40px; z-index:10;">Absolute layout</span>                <button style="position:absolute; left:110px; top:50px; z-index:9;">Button</button>                <div id="d1"></div>                <div id="d2"></div>            </div>        </div>    </div></body></html>

IE8、FF测试效果：

好吧！如果你在IE7下预览上述的页面，是有bug的，IE7效果见下图：

不得不说，IE7是我很不喜欢的一个版本，在IE8和FF下运行好好的样式，到IE7中，各种错乱，比如：onmouseover或onmouseout被触发后，div莫名消失，div无法正常包含div，等等，这真是一个让人非常痛恨的版本！好吧，不再纠缠IE7的是非，针对文章中错乱的问题，用如下办法解决：

去掉layout-bg样式中，text-align:center的定义，即恢复正常，这个办法是从这篇文章中找到的灵感。上述的代码经过IE7、8、FF测试，运行无误，有什么问题可以在评论区留言，希望能给某些朋友带来便利。

IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF

IE、Firefox使用绝对定位(absolote) 网页居中布局支持IE7,8,FF