您的位置：首页 > Web前端 > HTML

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

2011-11-19 13:15 423 查看
      对于企业官网来说，网站要有自己独特的个性，并且，不能使用太“老土”布局办法（使用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 div table xhtml 测试
相关文章推荐
新的分享
章节导航