zoom:1

　　zoom:1的作用：触发IE浏览器的haslayout、解决ie下的浮动等一些问题。

　　zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。

应用：

　　1.用css中的zoom属性可以让网页实现IE7中的放大缩小功能。

       　　<body style="zoom:0.5"> 让你的网页缩小为原来的一半

 

　　2.使用zoom解决IE6浏览器下嵌套容器清除浮动问题

 　　经常遇到一个容器外面套一个边框，边框高度随容器高度变化，但是当边框内容器设置了浮动属性后，外框就不跟随变化，这时就需要清除浮动。

　　很多时候，我们直接给父元素添加一个类名class=”clearfix”

　　.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}

　　但是这样还是没有解决ie6的问题，这里可以用zoom = 1 来触发父元素的hasLayout

　　.clearfix{zoom:1;}

test01:

<ul class="box01 clearfix">
    <li>itme01</li>
    <li>itme02</li>
    <li>itme03</li>
</ul>
.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}
.box01{background: #f1c100; margin: 0; padding: 0;}
.box01 li{float: left; width:100px; border: 1px solid #000; list-style: none;}

　　ie6效果：父标签高度为0，父元素没有触发hasLayout，清除浮动失败。

 

test02:

　　结构一样，css如下：

.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}
.clearfix{zoom:1;}/*触发hasLayout*/
.box01{background: #f1c100; margin: 0; padding: 0;}
.box01 li{float: left; width:100px; border: 1px solid #000; list-style: none;}

　　ie6效果：父元素高度随容器高度变化，成功清除浮动。

 

 

 

posted on 2013-11-06 15:37  群er  阅读(490)  评论(0)    收藏  举报