zoom属性确实是ie专有属性,除了设置或者检索对象的缩放比例之外,它还具有触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 但是火狐浏览器不支持zoom属性,不过在webkit内核浏览器中zoom这个属性也是可以被支持的。
显然,你这里设置的zoom:2, 即表示放大为原来的2倍,里面的字体也相应被放大了2倍。
在IE浏览器里,Zoom的使用方法是这样的:
zoom : normal | number
normal : 默认值。使用对象的实际尺寸
number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只有在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等。
其实这个属性是一个不标准的css属性,因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。关于transform属性的具体属性和使用可查看在线教程CSS3 transform 属性。
希望我的回答能够帮到你。
1、使用clear:both清除浮动在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。
优点:简单,方便兼容性好
缺点:因为会造成结构混乱,不利于后期维护
建议:一般情况下不建议使用该方法
2、利用伪元素clearfix来清除浮动
给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
.clearfix:after {
display: block
clear: both
content: ""
visibility: hidden
height: 0
}
.clearfix { zoom: 1}
原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义在公共类,以减少css代码
3、父级div定义overflow方法
当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。
.parent-container {
/* other style... */
overflow: hidden
}
原理:它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果,即添加:before和:after伪元素。
.clearfix:before,.clearfix:after {
content: ""
display: block
clear: both
}
与方法2相同
zoom:1属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。但很遗憾的是,它通不过W3C验证.