专题页背景大图（background）在IE6下居中并模拟最小宽度（min-width）

先上图吧，大家看看这个页面的背景图和导航，人的脚是在导航条上，然后拼接上去的：

这张背景图的宽度是1400px，导航条宽1080px。

HTML 结构如下，由于背景图较大，故切成三张：

1     <div id="topBG">
3         <div class="topBG01"></div>
4         <div class="topBG02"></div>
5         <div class="topBG03"></div>
6     </div>

此时若不给<body>设min-width，窗口宽度小于1080px时，背景始终居中，我们看到腿“断开了”:

 

设置名min-width:1080px后，问题解决。但是IE6不认识min-width，该方法不起作用。基于这个HTML结构，试了许多heck方法，并不理想。

最后发现，要想解决该问题，需要调整HTML结构，代码如下：

    <div id="topBG">
        <div class="topBG01">
            <div class="gminwidth"></div>
        </div>
        <div class="topBG02">
            <div class="gminwidth"></div>
        </div>
        <div class="topBG03">
            <div class="gminwidth"></div>
        </div>
    </div>

看似给页面添加了三个无意义空标签，其实不然，这要我们给这些<div>设定宽度，就可以在IE6下模拟min-width的效果：

1 #topBG .topBG01{width:100%;height:186px;background:url(topBG_02.jpg) no-repeat center top;}
2 #topBG .topBG02{width:100%;height:100px;background:url(topBG_04.jpg) no-repeat center top;}
3 #topBG .topBG03{width:100%;height:517px;background:url(topBG_05.jpg) no-repeat center top;}
4 #topBG .gminwidth{width:1080px;}

最终效果如下，在IE6下完美解决没有min-width的问题。

posted @ 2012-07-27 12:04  只争朝曦  阅读(323)  评论(0)    收藏  举报