现在的位置: 首页 > web前端 > 正文

css中的zoom的作用

2020年07月20日 web前端 ⁄ 共 1308字 ⁄ 字号 评论关闭

  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给大家简单的介绍了一些,希望大家多看看。


  

抱歉!评论已关闭.