We’ll start with a simple truth – I code for FireFox (and Chrome) and it seems to have no problems with most code. That being said, there are times where it goes haywire. FF2 and floated elements sometimes have issues.

Anything which says ‘CODE’ means your particular css that you want to be cross-browser.

FireFox | IE6 | IE7 | Opera | Safari

FireFox

This particular hack targets FireFox 1 and FireFox 2.

body:empty CODE { }

This hacks targets FireFox 2 and below, particularly nice and foolproof.

CODE, x:-moz-any-link {
  property: value;
}

This works well.

html>body CODE { }

This one is a newer hack.

html:not([lang*=""]) CODE { }

This one is to be used with the previous hack that used x:-moz-any-link.

/* This is for the FireFox 2 and 1 */
CODE, x:-moz-any-link {
  property: value;
}
/* Then overwrite for Firefox 3 specifically */
CODE, x:-moz-any-link, x:default {
  property: value;
}

This is the surefire method of targetting FireFox though, by using proprietary extensions. Not neat. But, works 100%.

@-moz-document url-prefix() {
  CODE { }
}

IE6

This particular cross-browser cheat is an old one, but still works. Also targets IE5 though.

* html CODE { }

This one (I feel) isn’t as good as the previous one.

body CODE {
  _property: value;
}

IE7

This is another old favourite for IE7.

*+html CODE { }

And here is one that took over from the previous one. This is valid CSS too.

*:first-child+html CODE { }

Since IE6 doesn’t understand the > selector, this one works well. Note the * directly in front of the property. I don’t use this one though since the first one works fine.

html > body CODE {
  *property: value;
}

Opera

This one is a bit more in-depth.

@media all and (min-width:0px) {
  head~body CODE { }
}

And this one targets Opera 9 and below.

html:first-child CODE { }

This one is one of the latest Opera 9 css hacks out:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body CODE { }
}

Safari

Like the proprietary FireFox hacks (above), Safari has one that works 100% with it.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  CODE { }
}

This one is for Safari 3.0+ and is valid css3 so it will eventually be supported by other browsers. This is now invalid (2011).

body:first-of-type CODE {
  property:value;
}

For Safari 3.1 Safari 4 this works. Enclose your desired css code in this @media block:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  p {
    property: value;
  }
}

I had a great idea yesterday of linking articles from the company blog to individual stickers, so one article for Electrical Warning stickers, one article for No Swimming and so on. Great idea isn’t it? Google should pick up on it and it will generate traffic for the company’s website.

Then I ran into a problem. Because of the way I was handling the sign symbols, I was using an array and happened to use indexOf to find where a word was in the array. Opera and IE(7) were going nowhere with it – FireFox was fine (surprise). Then I found an article at CommaDot, entitled Opera JS Troubleshooting which resolved the issue, apparently a bug with the way Opera handles indexOf (and incidentally, it fixed IE7′s issue with it too). Here it is:

// This is solely to support indexOf in Opera. Not sure of a better way to do this
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(val, fromIndex) {
    if (typeof(fromIndex) != ‘number’) fromIndex = 0;
    for (var index = fromIndex,len = this.length; index < len; index++)
      if (this[index] == val) return index;
    return -1;
  }
}

Now it all works properly, as it should, setting the document’s title and the h1 title on the page to the correct symbol name.