I will solve the CSS bug in this way.

There are too many projects. I gradually realized that, based on reasonable semantics, proper document stream, and correct standardization, pages are produced in the standard rendering browsers produced by various companies, generally, there is no need for too many hack to solve the compatibility problem. It also includes the less standard IE 6.

1. Reasonable semantics: Use tag properly. Everyone's understanding of semantics is different. Apart from the obvious labels that can be more reasonable, there is no need to argue against each other, and it is difficult to have a result. Then pay attention to the basic nesting order of block and inline elements.

2. Proper Document Stream: Let's look back at the rendering of the browser and refer to the document stream in every document that introduces CSS. Sorry, I did not find the original source of W3C, but found three basic Positioning Mechanisms in CSS: normal flow, float, and absolute positioning. For more information, see http://www.w3.org/tr/css2/visuren.html. After a correct understanding of the above, there will be no bad habit of "setting all elements to float and positioning is correct.

3. haslayout: the root cause of all evil in IE lies in layout. Read this concept repeatedly.

Procedure

A. Pre-check:

1. Check whether correct CSS is introduced. Firebug is easy to find.

2.html tags are not closed. It is easy to confirm with Dreamweaver. If a problem occurs in Dreamweaver, you can only manually check the problem, or consider writing a script to perform tag matching verification.

B. FAQs

1. Check whether float needs to be cleared.

2. Try to add overflow: hidden to the parent container.

3. Trigger the haslayout attribute. Note: Based on experience, you can try to trigger the haslayout attribute of the parent container and its sub-containers. Normally, if layout is the cause, it will be normal in ff, and an error will occur in IE.

4. If the layout is different from the expected layout in coding, review the code structure. Is the concept of the Box Model incorrect? Is the Document Stream correct. Analyze whether the document stream (or positioning mechanism) of the problem meets the standards. You can set background and border of different colors to assist analysis. This analysis must be based on the repeated understanding of the positioning mechanism.

5. Mysterious gaps. It is generally related to line-height, font-size, vertical-align, or delete spaces in the original code.

C. If the problem persists

If the above method fails to solve the CSS bug problem, the bug is complicated. Required:

1. Streamline unnecessary HTML, delete HTML parts one by one, locate the HTML impact, and repeat Step B.

2. Simplify CSS. The reason for the above two ends is: Sometimes the Code with the CSS bug may not be wrong, it may be because of the impact of code nearby to him.

3. at the same time as step B4, I encountered many problems in the early stage. I finally looked back, but I found that I used a reasonable HTML structure (or a more semantic one ), usually there will be no compatibility issues.

I tried to give examples to illustrate the problem, but I found it difficult to find a ready-made example. However, as far as practical experience is concerned, using the above methods can solve many compatibility problems or other bugs. I hope it will be helpful.