CSS gray text opacity and Firefox color issue

I'm using following jQuery function to change the opacity of text (it's color: #999999)

$('.small_buttons').css('opacity', 0.3);

The effect looks good in Chrome or even Internet Explorer 8, but in current version of Firefox (3.6.10) this text gets really strange greenish colour, instead of nice pale gray.

Screenshots:

Chrome:

开发者_开发百科

Firefox:

Help appreciated!

Update: example: http://jsfiddle.net/YnDFr/1/

---

It appears it's because the element has no background, or specified as transparent. Try to add it the same background as its container.

---

fyi: I had the same issue with FF 3.6, found the following solution, which actually works on a variety of browsers excl. IE < 9.0;

just use the following syntax: color: rgba(r,g,b,opacity);

i.e: color: rgba( 153, 153, 153, .5) ;

this results in color: #999999; and opacity: .5; no need to apply background-color if you're text is on a transparent DIV. Most modern browsers, even IE 9.0 have support for the RGBA() color definition