问题
I have a page (page1.html) which references a css file (style1.css)
All is good.
I need Page1.html to additionally reference Style2.css However when I add the reference, some stuff on Page1.html screws up.
How can I determine what it is about Style2.css that is causing this problem? Some diff Tool? Some Process?
回答1:
Firebug shows you which rules are being overridden, and from which stylesheet the rules come from.
Just select the problem elements and it will show you the rules applied to it. You can then toggle them on/off the see the effect.
回答2:
Directly compare two CSS stylesheets to instantly see the differences between them: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/
Very handy when you making changes to a site's CSS and you cant remember what you changed (as long as you keep a backup of the original to compare against)
回答3:
Yes, I would use a diff tool (DiffMerge is free) and see what is similar between the two css files.
回答4:
DiffMerge (or any diffing tool for that matter) is good if your files have a similar layout but if they are very different (like I expect your CSS might be) the might easily show the entire file as being one big difference and so prove to be no use at all.
What I would do in this situation is install the dom inspector in FireFox, and the inspect this add on.
Then, include your 2nd style sheet and view the page.
Right click on the bocked element and "Inspect this". Then change the view mode of the dom inspector to CSS. It will show you the current cascade of styles applied to the current element and also give reference to which file and which line.
This way you can figure out where you have conflicting styles.
This is admittedly no automatic process but unless your styles are 99% identical then diffing isn't going to work.
回答5:
I've used this php class before - works well.
http://www.phpclasses.org/package/4638-PHP-Compare-two-CSS-style-definitions.html
回答6:
All good answers.... I am loathed to pick a correct one this time.
Just to add to the mix... A colleague recommended the Web Developer Toolbar for FF.
I used CSS\View Style Info and then clicked the stuff that was strange... I quickly found a rule from the new stylesheet which was radically altering the height of it.
回答7:
For developers using Visual Studio 2008 who may be reading this:
When you select an HTML element in the WYSIWYG designer, you can use the CSS Properties window to see all CSS rules and their corresponding settings, including the cascading settings inherited from the various CSS rules.
By clicking on a rule in the property pane, you can identify the source of each CSS setting. This makes it easier to figure out why a page or element looks a particular way.
回答8:
diffchecker(online) tool. Quite useful and fast. http://www.diffchecker.com/
来源：https://stackoverflow.com/questions/225672/what-tool-to-use-to-compare-and-reduce-css-style-sheets