Why do radio buttons look ugly in IE8 and IE9 mode

I have some typical radio buttons using the built-in 开发者_高级运维form elements. The radio buttons look fine in Chrome and Firefox 4, but when I use IE9 mode or IE8 mode in IE9 they look very ugly. The radio buttons will look fine in IE9 if I switch IE9 to IE7 compatibility mode. Is there a reason this would happen?

setting width/height (i. e. 13px) helps removing surrounding margins around radio buttons on IE which is quite useful. make sure you don't (re)set border on radios; border:0 renders selected radios with black dot inside and they look 'uglier'

it could be some setting on your computer where you have chosen to highlight performance over appearance.

IE9 has changed how it draws thing a lot, read more here: IE 9 does not use sub-pixel antialiasing under certain conditions