Capability detection works well for some cases, not all. I was working on a web-app today and was trying to make a menu-bar using ul/li with small icon images a

Capability detection works well for some cases, not all. I was working on a web-app today and was trying to make a menu-bar using ul/li with small icon images and no matter what I did, every single browser (chrome/ff/ie/opera) rendered slightly differently. In one browser I had to add display:block and in another, position:relative. Putting position:relative for all browsers did not work. One browser needed line-height:14px while another needed 20px. I didn't want to spend 3 hours finding the root cause or the most elegant solution to this annoying little problem. So I just did _line-height:20px and it lined up perfectly in IE. And I used jQuery.browser.opera and addClass(".fixopera") to make sure it worked in Opera. Detecting the box-model etc. could help if it was related to box-model issues. When text and images just don't line up, what should I use?