What I did with my site (started with firefox, and the only thing I found that was incompatible was IE6-) was to use a conditional comment that only IE reads, ie:
Code:
<!--[if IE lt 7]>
<LINK REL=StyleSheet HREF="IE-skin.css" TYPE="text/css">
<![endif]-->
That would go right under the skin1.css (designed around firefox) link in the customer/home.tpl .
What happens is that the site should load the corresponding style sheet. This does mean you will need to design your site twice to get the same look cross browser. What I have found is that if you design for firefox, it will look similar, but not exact, to opera and safari. I havent tested out IE7 yet and the only mac browser I tested was safari (only through screenshots).
One trick I used for designing for IE, and im sure you can use it vice versa, is to place borders around certain elements by using "border: 2px dashed #33ff00;" (you can use any type of border you want, this is just an example). Although, once you get everything in place and remove the borders, you may have to move the element by 2-4px because of the border that was placed.
The alternative option is to use tables for placement of everything.