利用zoom解決ie6下div浮動錯位的問題
發(fā)布時間：2015/04/22 來源：長沙建站
這里我給大家分享的是今天在長沙建站時寫div+css做首頁滾動圖片，在ie6下測試，滾動的三個小點居然跑到網(wǎng)站最底部去了。這就是明顯的div浮動錯位問題。現(xiàn)在直接給大家上圖解釋。
除了ie6下的其它瀏覽器都可以正常顯示如下圖：
在ie6下確是這樣顯示的：
滾動的三個小點跑到網(wǎng)站最底部去了。
這部分的div代碼如下：
<div class="banner">
<div id="hjs_imgCont">
<div class="hjs_imgCenter"><img src="templates/official/images/swf/01.jpg" width="1900" height="421" /></div>
<div class="hjs_imgCenter"><img src="templates/official/images/swf/02.jpg" width="1900" height="421"/></div>
<div class="hjs_imgCenter"><img src="templates/official/images/swf/03.jpg" width="1900" height="421"/></div>
</div>
<div id="next_bnt" style="display:none;"></div>
<div id="prev_bnt" style="display:none;"></div>
<div id="scorllBar"></div>
</div>
css代碼如下：
.banner{ position:relative;}
#scorllBar{margin:0px auto; position:absolute; bottom:20px; left:50%; margin-left:-70px;}
#scorllBar a{ display:block; width:28px; height:12px; cursor:pointer; float:left; background:url(../../images/ban_dot.png) no-repeat;}
#scorllBar a.active{ background-position:-28px 0;}
#scorllBar a span{ display:none;}
#scorllerCont{ width:1000px; height:461px; overflow:hidden;}
#hjs_imgCont{ height:421px; overflow:hidden; z-index:10;}
.hjs_imgCenter{ position:relative; height:430px; overflow:hidden; float:left;}
.hjs_imgCenter img{ position:absolute;}
從網(wǎng)上找到許久，最后測試得出，只要在.banner{ position:relative;}的css代碼上加zoom:1;就可以正常顯示了。
css中zoom的作用主要是：檢查頁面的標簽是否閉合 、樣式排除法 、模塊確認法 、檢查是否清除浮動 、檢查 IE 下是否觸發(fā) haslayout 、邊框背景調(diào)試法。
我這次ie6下div浮動錯位的問題用zoom:1來解決主要是利用了css中zoom的作用中的檢查IE6下是否觸發(fā) haslayout。