While making CSS for the website it is painful when sometimes it works on some browsers and some don't. I wonder if there any place I can find the existing problem which has been noted with experience developers. So I can have a list of noted problem while developing.
What are the tricks? Where Can I find it ? How to solve it if possible?
The most problematic browser is Internet Explorer (especially 6 and below, 7 is not so bad, and 8 is a huge step in the right direction).
Even if IE holds the majority of the market, develop for a standard compliant browser such as Firefox or Webkit (Chrome and Safari) using an XHTML doctype, then fix the discrepancies on IE at a later stage. That way you will achieve the maximum compatibility with little or no efforts (if it works in the Gecko or Webkit engine, you are pretty close to being guaranteed that it will work for most browsers [except IE, but in most cases you'll be very close to perfect]).
Most of the problems you'll run into with IE are well documented on the Internet and are rather easy to fix if your page is standard compliant.
If you develop for IE first (especially IE6) then try to make your page work with the rest of the browsers, that will be problematic as your changes will probably end up breaking IE rendering.
Also, an other thing that is important to note is that font availability and rendering is different from platform to platform. Verdana on Windows may not be smoothed the same than on a Mac, and the font might not even be present on *nix.
QuirksMode has a comprehensive list of features supported on a given browser:
Personally, my biggest peeve with IE6 is its poor support for PNG-24's with transparency. It requires a filter to somewhat support it.