What steps could be taken to avoid cross-browser compatibility issues?

Question

Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.

My questions to you are:

1. What are the important rules you use before hand, when developing across multiple browsers to save you time?
2. How do you prevent yourself from writing incompatible tags?
3. What is the best way to avoid hacking your code?
4. Where do you find research on browser compatibility, do you use any tools?
5. Finally, when do you cross the line/where do you draw it?

Answer 1

1. I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.

2. Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.

3. Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.

4. LitmusApp

5. There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.