Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes.

Here is a quick summary :

1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don't use Lucida
6. Size text as a % in the body, and as em's throughout
7. All layout divs that are floated should include display:inline and overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or height
9. Don't use any fancy CSS3 selectors
10. Don't use transparent PNG's unless you have loaded the alpha

 further reading

http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/