A detailed description of the Zoom property in CSS

Zoom this property is IE proprietary properties, in addition to set or retrieve the object's scale, it also can trigger IE haslayout properties, clear floating, clear margin overlap and other functions. However, it is important to note that Firefox does not support the Zoom property, but in the WebKit kernel browser The zoom attribute is also supported.

First, some of the preceding YY

First of all, don't know if you notice that the title "clear Floating" adds a quotation mark. I have recently wondered whether this so-called "clear float" is accurate. People have the mentality of conformity, especially in our collective culture of society, the herd is not a negative label, in the Asian collectivism culture (such as Japan), it symbolizes patience, self-control, and mature, but sometimes will continue some inaccurate views, still remember the primary school "two iron Ball simultaneous landing" story?

I would like to say some personal, very emotional things, very welcome to refute. I also often see the word "clear float" in foreign technology, translation came to be "clean float", I entered a relatively shallow, so I can only imagine, is not "clear floating" does indicate that meaning, so widely used, the more widely used is not easy to find the less rigorous.

I recently thought about "clear floating" some things, found that the "clear floating" the more the idea of the more I think more inaccurate. The exact term should be "clear float", what is the real "clear float", float:none; this is the literal meaning of "clear float". Of course, there may be "clear floating" is a short term, meaning "clear the impact of the float", just called the smooth, we all call it, we actually know that. I wish I had thought more.

YY end, into the topic of this article, some thinking about the content, tell me about the overflow and zoom can clear the impact of the floating of the understanding of the reasons, are some shallow understanding, I hope the real understanding of the people can point to correct, greatly welcome the rebuttal, published your own views.

Second, the inclusion of elements

The term "parcel" often appears in JavaScript, especially the JS library such as jquery, a very vivid word. Yesterday, I saw a very enlightening remark: "Visual thinking can be a unique and effective way to let your heart have more space to solve the problem." "The heuristic is that the" visual thinking "here is replaced by other nouns, such as" emotional thinking "and" visualizing thinking ". That is, when thinking about problems, incorporating some very subjective, non-logical thinking helps to have a broader space to solve problems.

When it comes to the word "wrapping", I think of the white-cell engulfing bacteria (visualizing thinking – Association), as well as warmth and peace of mind (emotional thinking). This is due to human heredity, growth and other factors related. Why do I have to talk about these seemingly unrelated topics, because the following I will be a lot of things are their own feelings, "I think it is this way", a lot of subjective things.

(1) Below we look at the role of zoom in non-IE browser: Look at the following example, I am in the Google browser access, in this example, zoom in the role of the original twice times (readers can try to reduce their own operation)

When 1.zoom:1

<! DOCTYPE html>

The result of the above code

The 2.zoom:2 is magnified to twice times the original:

<! DOCTYPE html>
Note: Zoom is displayed in non-IE browsers to support zooming in or out, but since this property is a non-standard CSS property, it is generally not possible to zoom in and out of zoom in a non-IE browser, now zoom in or out directly with CSS3 's Transform property.

(2) After reading the zoom in non-IE browser performance, we should see this property in IE browser role.

How to use zoom:
Zoom:normal | Number

Normal: Default value. Use the actual size of the object
Number: Percent | Unsigned floating-point real number. A floating-point real value of 1.0 or a percentage of 100% is equivalent to the normal value of this property in the vernacular, zoom: The number that follows is the magnification multiplier, which can be a value or a percentage. such as: zoom:1,zoom:120%. This property only works in IE, so it is seldom used for its actual use, and most often used to clear the float, such as:

. border{
border:1px solid #CCC;
padding:2px;
Overflow:hidden;
_zoom:1;
}
_zoom is the part of the CSS Hack Secondary school that works for IE6. The IE6 browser executes zoom:1 to represent the scale of the object, but here
Overflow:hidden, and _zoom:1, are used to clean border internal floats.

Similarly, you can also use the same method to clear the margin property in IE browser overlap problem: This refers to the Zoom property in IE, the second role of the

Compatible with IE6, IE7, IE8 Browser, often encounter some problems, you can use the zoom:1 to solve, has the following role:

(2) trigger the haslayout of IE browser, solve some problems such as floating under IE, margin overlap and so on.
For example, this site uses p to do a row of two columns of display, HTML code:

<p class= "H_mainbox" > 

CSS code:

. h_mainbox {border:1px solid #dadada; padding:4px 15px; Background:url (.. /mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; Overflow:hidden}. h_mainbox h2 {font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color: #555 ;} . H_mainbox H2 span {float:right; font-weight:normal;}. h_mainbox ul {padding:6px 0px; background: #fff;}. mainlist {over Flow:auto; Zoom:1;} . h_mainbox li {width:268px; float:left; height:24px; overflow:hidden; Background:url (...) /icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}
Mainlist inside of the zoom:1 can be in IE6, IE7, IE8 normal display effect.

(3) The following is a summary of the effects of the zoom attribute in IE browser, and I hope to be helpful in using this property in the future:

 1, check whether the label of the page is closed 
 do not underestimate this, perhaps the two days you have not solved the CSS BUG problem, but only from here. After all, page templates are generally nested by development, and they are prone to make such problems. 
 Quick tip: You can open a file check with Dreamweaver, usually without a closed label, highlighting the yellow background. 
 
 2, style exclusions 
 Some complex pages may be loaded with N external chain CSS files, then delete the CSS file, find the specific CSS file triggered by the BUG, narrow the scope of the lock. 
 
 For the problem of the CSS style file that was just locked, row by line delete the specific style definition, navigate to the specific trigger style definition, even the specific trigger style properties. 
 
 3, module confirmation 
 Sometimes we can also start from the HTML element of the page. Delete the different HTML modules in the page to find the HTML module that triggered the problem. 
 
 4, check whether to clear floating 
 There are actually a lot of CSS BUG problems because there is no clear floating caused. It is necessary to develop a good habit of clearing floating, and it is recommended to use the method of clearing floating without extra HTML tags (try to avoid using overflow:hidden;zoom:1 similar method to clear the float, there are too many restrictions). 
 
 5, check if the IE triggers haslayout 
 Many of the complex CSS bugs under IE are closely related to the haslayout specific to IE. Familiarity and understanding of haslayout can do more with complex CSS bugs. It is recommended to read the OLD9 translation of "On Have layout" (if you cannot climb through the great GFW, you can read the blue reprint) 
 Quick tip: If the Haslayout,ie Debug tool is triggered in the properties of IE Developer Toolbar The haslayout value of-1 will be displayed. 
 
 6, Border background debugging 
 The name Incredibles is to set a prominent border or background (general black or red), for debugging. This method is one of the most common ways to debug a CSS bug and still applies to complex bugs. Affordable also environmental protection ^ ^ 
 Finally want to emphasize that a good writing habits, reduce the extra tags, as far as possible semantics, in line with the standard, in fact, we can reduce a lot of extra complex CSS BUG, more time is actually our own to create a problem.