Several good methods to quickly locate bugs during CSS style design

In the design of the DIV + CSS template, detecting and searching for bugs in CSS is undoubtedly a pain point. The following experiences may help you quickly find and fix bugs in CSS!

1. Check whether float is cleared.

In fact, many CSS bugs are caused by the absence of floating clearance. It is necessary to develop a good habit of clearing the floating. We recommend that you use no additional
HtmlThe method to clear the floating label (avoid using overflow: hidden; ZOOM: 1 to clear the floating as much as possible, there will be too many restrictions ).

2. Check whether haslayout is triggered in IE.

Many complex CSS bugs in IE are closely related to haslayout that is unique in IE. Familiarity with and understanding of haslayout will get twice the result with complicated CSS bugs. We recommend that you read the on having layout translated by old9 (if you cannot go through the Great GFW, you can read the post on the blue)

Tip: If haslayout is triggered, the haslayout value is-1 in the attributes of IE developer toolbar, the debugging tool of IE.

3. Border background debugging

Therefore, the watermark is used to set a conspicuous border or background (black or red in general) for debugging. This method is one of the most common methods for debugging CSS bugs and is still applicable to complex bugs. Economic benefits and environmental protection.

4. Check whether the tab on the page is closed.

Don't underestimate this article. It may have left you alone with the CSS bug that you haven't solved for two days. After all, page templates are usually nested by developers, and they are prone to such problems.

Tip: You can use Dreamweaver to open the file check. Generally, there is no closed tag and the background is highlighted in yellow.

5. Style exclusion

Some complex pages may load n external CSS files, so Delete the CSS files one by one, find the specific CSS file triggered by the bug, and narrow down the lock range.

For the CSS style file that has just been locked, delete the specific style definition line by line, locate the specific trigger style definition, or even the specific trigger style attribute.

6. Module Validation Method

Sometimes we can also start from the HTML element of the page. Delete different HTML modules on the page and find the HTML module that triggers the problem.

I hope the above methods can be used inDiv + CSSDesigned to help you!

 

Original article: http://www.zhuyew.net/a/div_css/div_css_layout/20110716/451.html

This website is quite good. At least all the articles I have seen are very practical. It is a summary of some experiences and is much more reliable than other online articles.