Steps to troubleshoot CSS problems

问题:

I've got a rather minor CSS problem, so particular to my site that googling for it doesn't return anything useful. (I might as well google "why isn't my CSS working?" for as easy to describe as the problem is.)

I've thought of a couple ways to troubleshoot the issue so far, including:

• CSS and HTML validators and linters
• tweaking around in Firebug for hours
• pasting code in an IDE to make sure parens, []'s and {}'s match
• looking at diffs of old code (some of which worked) with newer code (different parts of which worked) to find potential errors
• using the IDE spellchecker to look for typoes (can be tough when Javascript mixes with CSS and HTML)
• googling

Are there any other troubleshooting techniques I should be trying?

(The specific problem is that an @font-face that was previously rendering correctly is no longer rendering correctly.)

回答1:

I would do something like this.

At first dabbling around in Firebug (or the other methods in the other browser when they have the issue). Very important to me is the fact, that you can see, which css declaration is really used and then can switch it on and off.

If this leads to no succecss, you could try to recreate the issue outside of your page. Try e.g. to copy some of the code into jsfiddle and then delete code until the error disappers. Or the other way round: build you code from the ground up until the error occurs.

What you have to do next is research. Is it a bug in a browser, is your code not correct or is the declaration unsupported in your browser

If external resources are used, try the network inspectors in your browser to see, if the resources are loaded and then load the exact resource to see, what the content of this is

回答2:

Perhaps your site is public accessible, so we can have a look? And perhaps a better description of the problem?

Tried different browsers?

回答3:

Have you checked out Firefox's web console? CSS errors/warnings is a feature. Shortcut Ctrl+Shift+K

回答4:

I know this post is old by 2 years, but hope this may help anyone else plagued by CSS issues that happen across this answer. I too had the same issue and couldn't figure out a step by step process that would allow me to at least pinpoint the issue, until I found this "Troubleshoot CSS with Firebug".

I was able to finally narrow down the problem and ascertain workarounds and fixes, which in my case was a label,span ruleset conflict. In the past I usually stumble across hacks which would eventually create more issues later on.