zoom在清除浮动中的利用

zoom在清除浮动中的利用

zoom 是个困惑了好久的元素,今天对它有了个初步的认识

zoom, IE 的专属属性,在其他浏览器中不起作用,它的原本功能是设置或检测对象的缩放比例(只在IE下起作用)

比如

<div style="background:#f0f3f9; padding:20px; zoom:2;">
    <img data-src="http://XXXXX.jpg" border="0" />
</div>

在IE中它会使图片放大两倍显示。

在我们日常见到这个玩意的时候他一般用于浮动的清除,老的说法是可以触发IE的haslayout来清除浮动

在非IE和IE7及其以上版本的浏览器中,可以使用 overflow:hidden; 等方法来进行清除浮动

可是在IE6及其以下的浏览器中并不能正确的理解 overflow 这个属性,这是早期IE的一个bug

所以我们就可以用以下方式来清除浮动:

<div style="zoom:1; background:#f0f3f9; padding:20px;">
    <img style="float:left;" data-src="http://XXXXX.jpg" />
</div>
上一篇:Show-overflow-tooltip的作用


下一篇:盒模型与块级格式化上下文