Great CSS Hacks

Sometimes in the web development world you need a little help. Every browser won't care that you're trying to write standards-compliant code. The problem is that every browser has it's bugs; some have more bugs than others. So how do you get around the browser differences to make a page that looks somewhat similar across the board?
I'm going to show you a few CSS hacks that I'd advise you keep in your back-pocket.

* html (for IE6 and below)

These few characters of code have saved me many of times when I needed to isolate styles for IE6. When every other browser actually did what I wanted it to do, but this one in particular (which doesn't even take up a good percentage of the market share any more) would look different enough to warrant alternative methods, then I would be forced to use this hack. You implement it this way:

* html selector { ... }
* html .className { ... }

Now your IE6 layout will hopefully look just as good as that of other modern browsers.

*:first-child+html (for IE7 only)

There are rare instances when I just need a hack for IE7. Granted, currently we're on IE8 (and who knows how far they'll go with updates and the like) but you may run into an issue where something is needed just for IE7. Use this hack for those instances. You would implement it this way:

*:first-child+html .className { ... }
*:first-child+html #id { ... }

Now you've fixed your IE7 styling problems, hopefully.

!important (used to trump all other styles)

From my experience !important is used more for Internet Explorer than other browsers, although it's not a browser-specific hack. You would use !important to trump other styles within the hierarchy. So, let's say you had styles like this, perhaps for different sections of your page:

#content { width: auto !important; }
#content { width: 200px; }

The top style would take precedence over the bottom one because it has the !important tag after the value of the property. If you don't like using this method to define importance, then what you do is to make the style you want to have priority at the very bottom relative to everything else. Remember, CSS is hierarchical; it reads from top to bottom. If it sees multiple style definitions it'll apply the latest definition to that element or selector or class.

# (used after a semi-colon for Safari)

This is a hack for Safari, although, I don't recommend it too highly. I wanted to put it out there in case someone actually can find good use for it. The thing is, from what I remember, you can only use Safari hacks at the end of your stylesheet for them to count otherwise it could mess up your whole stylesheet. So just keep this one in your backpocket in case it proves helpful, but find other ways to fix inconsistencies with the Safari browser.

html:first-child (for opera 9 and below)

I found this one online although and thought it might be helpful. I don't do much coding for the Opera browser only because Opera is not heavy in client demand. Usually corporations don't require that their websites look great in Opera, but for those of you that care to cover the bases, consider implementing this hack in your stylesheet. Honestly, you may be better off just creating a separate stylesheet for Opera and having it load dynamically once detected through Javascript.

Conditional Comments

In your development experience, you may have viewed some source code that looked like this:

This is probably the cleanest way to handle separate styling/coding for Internet Explorer. What you can do is load a separate stylesheet for Internet Explorer using these conditional statements in the tag of your page.

Javascript

When all else fails, you may have to resort to using Javascript to get the workarounds you need. Whether you use JQuery, Mootools, Prototype, or whatever other library you prefer, there are ways to isolate elements, classes, selectors to be styled the way you need them to for a specific browser. What I recommend is that for whatever library you use, get a good browser detection snippet of code for it. What it will do, usually, is have isolated case statements for certain browsers that you can reference and then change the styles as you need it.

Sources:
http://themechanism.com/blog/2007/03/28/safari-css-hack/
http://www.noupe.com/better-design/7-css-hacks-you-cannt-live-without.html
http://www.webdevout.net/css-hacks