A frequently asked question in interviews is the function of zoom: 1. Many people know that it is a clear float that triggers the haslayout attribute of IE.
But do you know how zoom:1 works and the ins and outs?
zoom:1 did help us solve a lot of IE bugs, but how many people know about its principle?
So let's talk about its ins and outs
【Introduction】
The zoom property is a proprietary property of the IE browser (also supported by the new version of chrome and Opera after the pro-test), it can set or retrieve the zoom ratio of the object, that is, the function is to zoom the element. So far, the wekbit series, ie series (ie6~ ie11) are supported.
Setting zoom: 1 can clear the float under IE6 and solve problems such as overlap caused by margin
【Applicable scene】
Often used to solve some IE-specific bugs, but where to write it when writing CSS?
When IE encounters problems, especially IE67, zoom: 1 can activate BFC, and then activate BFC to solve many problems
Usually, when the floating child element causes the parent element to collapse, it is only necessary to add overflow: hidden; to the parent element to solve it, but for IE67, it is not possible to trigger its hasLayout (with layout) attribute.
zoom:1 is IE6-specific trigger haslayout attribute. In IE, an element either calculates the size and organization of its own content, or relies on the parent element to calculate the size and organization of the content. When an element's hasLayout property is true, it is responsible for sizing and positioning itself and possible descendant elements.
In addition, hasLayout can also have an effect on inline elements. When the hasLayout of an inline element is true, you can set the height and width of the inline element and get the desired effect.
Usually, zoom:1 is used for compatibility with lower versions of IE. For example, when clearing a float, we would write
.clearfix::after{
content: ".";clear: both;display: block;
visibility: hidden;overflow: hidden;height: 0;*zoom:1
}
In order to prevent the lower version of IE browser from not supporting the after selector or some attributes, add zoom:1 at the end to clear the float
[Expansion] Specific knowledge about hasLayout, I made a summary in the following article
Summarize:
①The zoom attribute is a proprietary attribute of the IE browser (this sentence is not correct, because the new version of the mainstream browser is also compatible with the zoom attribute), but remember that Firefox and the old version of the webkit core browser do not support this attribute.
②zoom has now been gradually standardized, appearing in the draft CSS 3.0 specification, and zooming through the animation property scale in css3. But there are differences between zoom and scale CSS scaling, I made a summary in the following article http://570109268.iteye.com/admin/blogs/2410148
.