专题页背景大图(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的问题。