zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
CSS中zoom:1的作用
兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。
比如,本站使用DIV做一行两列显示,HTML代码:
zoom:1代码
<divclass="h_mainbox">
<h2>推荐文章</h2>
<ulclass="mainlist">
<li><ahref="#"style="color:#0000FF"target="_blank">CSS库吧</a></li>
<li><ahref="#"style="color:#0000FF"target="_blank">原创</a></li>
</ul>
</div>
.h_mainbox{border:1pxsolid#dadada;padding:4px15px;background:url(../mainbox_bg.gif)01pxrepeat-x;margin-bottom:6px;overflow:hidden}
.h_mainboxh2{font-size:12px;height:30px;line-height:30px;border-bottom:1pxsolid#ccc;color:#555;}
.h_mainboxh2span{float:right;font-weight:normal;}
.h_mainboxul{padding:6px0px;background:#fff;}
.mainlist{overflow:auto;zoom:1;}
.h_mainboxli{width:268px;float:left;height:24px;overflow:hidden;background:url(../icon3.gif)06pxno-repeat;padding:0px5px0px18px;line-height:200%;}
加红色的那里就可以在IE6、IE7、IE8正常显示效果了。
css中的zoom的作用
1、检查页面的标签是否闭合
不要小看这条,也许折腾了你两天都没有解决的CSSBUG问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。
快捷提示:可以用Dreamweaver打开文件检查,一般没有闭合的标签,会黄色背景高亮。
2、样式排除法
有些复杂的页面也许加载了N个外链CSS文件,那么逐个删除CSS文件,找到BUG触发的具体CSS文件,缩小锁定的范围。
对于刚才锁定的问题CSS样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。
总之,csszoom给大家简单的介绍了一些,希望大家多看看。