How to find CSS bugs in a page

I believe you have been relatively familiar with common CSS bugs, such as: IE6 Three pixelgap, Ie5/6 doubled Float-margin bugs, and more. But often we also encounter a complex CSS bug problem, the so-called "complex" essence refers to the conditions of the trigger is very complex, and "bug" is not necessarily a browser bug. For such problems, we should first solve the problem is how to locate, only a quick positioning to the problem, in order to better solve the problem.

For fast positioning, personal experience is generally as follows (basically can be located to me in Taobao encountered more than 90% of the complex CSS BUG problem):

1, check whether the label of the page is closed

Do not underestimate this, perhaps toss you two days did not solve the problem of CSS bugs, but only from here. After all, page templates are generally nested by development, and they are easy to commit to such problems.

Quick tip: You can use Dreamweaver to open file check, generally do not have a closed label, will be highlighted yellow background.

2. Style Exclusion method

Some complex pages may have loaded n outside the chain of CSS files, then one by one to delete the CSS file, find the specific BUG triggered CSS file, narrow the scope of the lock.

For the problem you just locked CSS style file, delete the specific style definition line by row, navigate to the specific trigger style definition, even the specific trigger style properties.

3, the module confirms the method

Sometimes we can also start with the HTML elements of the page. Delete the different HTML modules in the page and find the HTML module that triggers 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 form a good clearing of floating habits, and it is recommended that you use clear floating methods with no extra HTML tags (try to avoid using overflow:hidden;zoom:1 similar methods to remove floats, there are too many restrictions).

5, check IE whether the trigger Haslayout

A lot of IE complex CSS bugs are closely related to IE-specific haslayout. Familiarity and understanding of haslayout can be a multiplier for handling complex CSS bugs. Recommended reading OLD9 translation of the "onhaving layout" (if you can't climb through the great GFW, can read the reprint on the blue)

Quick tip: If the properties in the Haslayout,ie Debug tool IE Developer Toolbar are triggered, the haslayout value of-1 will be displayed.

6, Border background debugging method

Therefore, the name incredible is to set a prominent border or background (generally black or red) for the element to debug. This method is one of the most common ways to debug a CSS bug and is still applicable for complex bugs. Economic benefits also environmental protection ^ ^

Finally want to give you a point is that the formation of good writing habits, reduce the extra tags, as far as possible semantics, to meet the standards, in fact, we can reduce a lot of additional complex CSS bugs, more often in fact, we have to create their own trouble. Hope everyone away from the BUG, life is more and more beautiful.