CSS gray text opacity and Firefox problem - color issue

Question

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: http://imgur.com/eTlAg.png

Firefox: http://imgur.com/QAOF0.png

Help appreciated!

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

Answer 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.