The role of attribute zoom:1 in CSS styles

The role of zoom:1 in CSS
Compatible with IE6, IE7, IE8 Browser, often encounter some problems, you can use the zoom:1 to solve, has the following role:
Trigger the haslayout of IE browser
Solve the floating, margin overlap and other problems under IE.
For example, this site uses p to do a row of two columns of display, HTML code:

<div 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%;}
Add red there can be in IE6, IE7, IE8 normal display effect.

Add red there can be in IE6, IE7, IE8 normal display effect.
The role of zoom in CSS
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 use Dreamweaver to open file inspection, generally no closed tags, yellow background highlighting.

2. Style Exclusion method
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 method
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
In fact, there are 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 whether the IE trigger Haslayout
Many of the complex CSS bugs under IE are closely related to IE's unique haslayout. 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 debug tool that triggered the Haslayout,ie, IE Developer Toolbar in the properties will show a haslayout value of-1.

 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. Hope you stay away from bugs, life is getting better.