CSS debugging troubleshooting list

When developing CSS on the Web page display layer, you may find that the style is not applied. This problem needs to be solved by using the firebug plug-in Firefox.

There are usually three situations where the defined style is not applied.

1. Style files are not loaded successfully (low-level errors, but sometimes occur in complex environments)

2. the CSS file is not referenced (low-level errors, but some messages are sent in the case of responsibility)

3. style conflicts (Advanced errors require troubleshooting)

If the style file is not loaded successfully, you can view it through the network of firebug. With the help of firebug, you can easily find out which files are not loaded successfully, which may include CSS files. The files are marked in red.

 

If the first case does not exist, check whether the CSS file is referenced. It is determined by the CSS list of firebug.

.

If the second case does not exist, check whether there is a style conflict. If you introduce a complex css framework as a general style, you define a set of CSS for special display of the project. When two sets of CSS are simultaneously included in a webpage, the risk of conflict may occur. This is, you can select a webpage element under firebug to view the "calculated style", such as clicking font-family, firebug will show you which CSS file the style is defined in.

 

Good luck. Less overtime, more time to accompany your family.