利用zoom解决ie6下div浮动错位的问题-湘龙工作室

利用zoom解决ie6下div浮动错位的问题

发布时间：2015/04/22 来源：长沙建站

这里我给大家分享的是今天在长沙建站时写div+css做首页滚动图片，在ie6下测试，滚动的三个小点居然跑到网站最底部去了。这就是明显的div浮动错位问题。现在直接给大家上图解释。

除了ie6下的其它浏览器都可以正常显示如下图：

在ie6下确是这样显示的：

滚动的三个小点跑到网站最底部去了。

这部分的div代码如下：

</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;}

从网上找到许久，最后测试得出，只要在.banner{ position:relative;}的css代码上加zoom:1;就可以正常显示了。

css中zoom的作用主要是：检查页面的标签是否闭合、样式排除法、模块确认法、检查是否清除浮动、检查 IE 下是否触发 haslayout 、边框背景调试法。

我这次ie6下div浮动错位的问题用zoom:1来解决主要是利用了css中zoom的作用中的检查IE6下是否触发 haslayout。