Every front end developer has run into styling issues when dealing with the dreaded Internet Explorer and its different variations. I cant tell you how many bug tickets I received to the tune of, “its looks great in FF, Safari, Chrome but is a mess in IE”. Or worse its only IE6 or IE7 and looks perfect in IE8 and IE9. Unfortunately Internet Explorer isn’t going anywhere, at least not anytime soon. So how do we deal this design nightmare of a browser? I used to write the occasional css hack to quiet IE7 from acting up, but that is really dirty coding and certainly not on the best practices list.

Writing browser specific stylesheets to target IE is really the only option to do it right. So how do you do it and where do you place the them? I have found from experimenting with all the different avenues the best way is with multiple stylsheets each targeting a different version of IE, yes this is a pain when you have to go hunting down different css files to make a change but there are no unnecessary HTTP requests and you dont have a ton of extra lines in your main stylesheet. I’m always keeping my ears open to new solutions, but for now this seems to be the way to go.