Quickly locate complex CSS bugs on the page

Quickly locate complex CSS bugs on the page

Author: blank time: Document Type: original from: Blue ideal

I believe that you are familiar with common CSS bug handling, such as IE6 three pixel gap, ie5/6 doubled float-margin bug, etc. However, we often encounter complicated CSS bugs. The so-called "complicated" means that the trigger conditions are complex, and the "bug" does not necessarily mean browser bugs. For such problems, the first thing we need to solve is how to locate the problem. Only by quickly locating the problem can we better solve the problem. For quick positioning, personal experience is generally handled as follows: 1. 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. 2. Style exclusion Some complex pages may load n external-link CSS files. Delete the CSS files one by one, locate the specific CSS file triggered by a bug, and narrow the lock scope. 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. 3. 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. 4. Check whether float is cleared. In fact, there are a lot of CSS bugs because the float is not cleared. It is necessary to develop a good habit of clearing floating. We recommend that you use a method without additional HTML tags (avoid using a similar method of overflow: hidden; ZOOM: 1 to clear floating as much as possible, there will be too many restrictions ). 5. Check whether IE is triggered.Haslayout 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. Read the on having layout translated by old9. Tip: If haslayout is triggered, the haslayout value is-1 in the attributes of IE developer toolbar, the debugging tool of IE. 6. Border background debugging Therefore, the watermark is to set a conspicuous border or background (black or red) for the element for debugging. This method is one of the most common methods for debugging CSS bugs and is still applicable to complex bugs. Cost-effective and environmentally friendly ^ the last thing I want to emphasize is to develop good writing habits, reduce extra labels, make semantics as much as possible, and conform to standards. In fact, this can reduce many extra complicated CSS bugs for us, in more cases, we have made trouble for ourselves.