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

最新推荐文章于 2021-08-04 03:12:46 发布

Lisliefor

最新推荐文章于 2021-08-04 03:12:46 发布

阅读量4.6k

点赞数

分类专栏： CSS 文章标签： ie firefox div table xhtml 测试

本文链接：https://blog.csdn.net/Lisliefor/article/details/6990426

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对于企业官网来说，网站要有自己独特的个性，并且，不能使用太“老土”布局办法（使用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测试，运行无误，有什么问题可以在评论区留言，希望能给某些朋友带来便利。

Lisliefor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE、Firefox使用绝对定位(absolote) 网页居中布局支持IE7,8,FF

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

扫一扫