Firefox Radio Button Alignment

I have been doing a bit of front end work on a web site and while I am still developing ideas I have been viewing my results in Safari because that it allows me to use cool CSS 3 effects like -webkit-box-shadow and -webkit-border-radius for rounded corners. This is great for design mock ups because it is so much quicker than creating bitmaps and then maybe deciding not to use them.

I can see that WebKit also has a lot more install for Safari users with gradients, masks and more. But my current version of Safari does not include these features yet.

But then I noticed that when I looked at my page on FireFox all the radio buttons seemed out of alignment and looked very messy. I wasted hours trying to figure out if my style sheet was the culprit. Then I noticed that even Google looked weird so it was not something I was doing to mess up the formatting:

Safari:

Internet Explorer:

Firefox:

Notice how the radio buttons seem to float above the text.

After a bit of experimenting with various alignment options I found that setting vertical-align: text-top made the alignment look OK in Safari and Firefox but terrible in IE.

For now I have given up on Firefox and just accept that its looks a bit shit.