利用zoom解决ie6下div浮动错位的问题-澳门美高梅娱乐城
澳门美高梅娱乐城提供澳门美高梅官方网站,长沙建站,长沙网站开发,软件制作,网站优化,域名注册,网络空间
澳门美高梅官方网站

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

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

 这里我给大家分享的是今天在长沙建站时写div+css做首页滚动图片,在ie6下测试,滚动的三个小点居然跑到网站最底部去了。这就是明显的div浮动错位问题。现在直接给大家上图解释。
除了ie6下的其它浏览器都可以正常显示如下图:
利用zoom解决ie6下div浮动错位的问题
在ie6下确是这样显示的:
利用zoom解决ie6下div浮动错位的问题
滚动的三个小点跑到网站最底部去了。
利用zoom解决ie6下div浮动错位的问题
这部分的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;}
 
从网上找到许久,最后测试得出,只要在.banner{ position:relative;}的css代码上加zoom:1;就可以正常显示了。
 
css中zoom的作用主要是:检查页面的标签是否闭合 、样式排除法 、模块确认法 、检查是否清除浮动 、检查 IE 下是否触发 haslayout 、边框背景调试法。
 
我这次ie6下div浮动错位的问题用zoom:1来解决主要是利用了css中zoom的作用中的检查IE6下是否触发 haslayout。
做网站版权所有 2009-2015 湘ICP备11020044号   sitemap

澳门美高梅娱乐城为您提供:澳门美高梅官方网站,长沙建站,长沙网站开发,软件制作,网站优化,域名注册,网络空间服务
Copyright 2002-2010 澳门美高梅官方网站www.nbcyh.com. 版权所有
澳门美高梅官方网站多少钱   澳门美高梅官方网站公司   澳门美高梅官方网站价格   澳门美高梅官方网站的
分享到: