FireFox CSS Hacks

firefox css hacksSometimes it’s not Internet Explorer, and sometimes it’s not FireFox… Sometimes it’s (*gasp*) Safari. I always develop for Safari and then fix everything else but sometimes, just *sometimes* you come across a situation where IE7, IE8 and FireFox 3 all render the same way. By law of averages, wouldn’t that mean that Safari has it wrong? Well let’s not jump to nasty conclusions, that doesn’t *prove* anything right?

Well regardless, I’m not about to start hacking for Safari (on moral grounds), so that leaves CSS hacking for IE7, IE8 and FireFox 3 (IE6 is just a given so were not going there). IE7 and IE8 are dealt with well enough using condition comments, <!–[if IE 7]> or <!–[if IE 8]> for example, but CSS hacks for FireFox are a different beast.

Some time ago I stumbled across [this guys trick](http://pornel.net/firefoxhack “CSS hack for Firefox 1.x/2.x only”) that goes something like this:
`#yourSelector, x:-moz-any-link {styles for Firefox 2.0 here}`
`#yourSelector, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}`

You can read more about it there, but in short, the :-moz-any-link is a private Gecko selector that other browser just ignore. Be warned though, it doesn’t validate so you’ll want to move it out to a javascript file or something if you are concerned about that sort of thing.

I don’t use this that often (only once before in fact), but it sure is handy to have in the toolbox sometimes.

[tags]firefox, css, hacks, ie6, ie7, ie8, internet explorer, safari, web design[/tags]

 

Adam Merrifield

 

Leave a Reply