专题页背景大图(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  只争朝曦  阅读(316)  评论(0编辑  收藏  举报