Is there a "good practice" way of detecting Firefox?

Question

If I were to read the title of this question, having never seen it before, my first response would be, "Don't! Use feature detection instead!", which makes perfect sense, however, it is not a feature I am trying to detect, but instead how Firefox renders colors.

For some reason all other browsers I have tested so far render a certain hexadecimal color that appears between images beautifully but it appears lighter in Firefox.

I have read about possible reasons why (i.e. something about color profiles, which I am just now exploring the topic of) and the "about:config" file here:

http://support.mozilla.org/en-US/questions/774152

http://jorgebernal.info/2008/03/08/whats-wrong-with-colors-in-firefox/

http://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/2008/08/21

Knowing why is fine, but there seems to be nothing on the topic of how this should be handled by a web-designer (also, it is possible that I am confusing the issue here, because they seem to be talking a lot about images, and the color rendering I am having trouble with is not an image, but just a simple hexadecimal color code value).

Here are a couple of screenshots showing the difference between the correctly displayed colors (shown first) and how Firefox renders the colors (shown second). Note the colors between each "button" image (which is actually just a 'mousover' drop down box). Also note that the little color that shows between the images are not images themselves, just standard CSS rendered hexadecimal colors:

IE 10:

Firefox 21.0:

I am fine with any solution that could get Firefox to display colors the same way that IE and Chrome do (tested on both 32-bit and 64-bit, and still only Firefox does this [on both]), but I know I'm not going to change the "about:config" file for the whole world, so if I could just reliably detect Firefox, perhaps I could just adjust its colors to a darker shade. Unfortunately, I (probably very wisely) never use browser detection, as I know how unstable and unreliable it is.

Is there a reliable (not to mention, future-proof) way to detect Firefox for a web designer? I simply use JavaScript/jQuery for client side scripting.

--------------------UPDATE---------------------

Okay, here is the CSS that renders the border colors. The red-is buttons have two classes: DDL and visType, while the grey-ish buttons have the DDL and groupType classes.

.DDL.visType
{
    background-color: #bb9191;
    border-right: 2px inset #ba8c8c;
    color: #1a5c17;
}

.DDL.groupType
{
    background-color: #e7e7e7;
    border-right: 2px inset #989898;
    color: #0b3773;
}

So, you can see there is nothing wrong with this CSS as far as FireFox is concerned. In fact when looking at the true color rendered in Firebug's and Chrome's developer tools both say that the actual color rendered is the same for the red-ish buttons' right borders (in rgb it translates to 186, 140, 140).

Answer 1

For this scenario, the problem apparently was how differently Firefox renders the 'inset' border style. Why I had it as inset to begin with is kind of a blur. I was probably testing the various looks on such a thin (2px;) border (differences that are barely, if at all, noticeable given the very narrow width).

Once I had changed this style to solid;, the color differences were much less drastic:

Chrome 27.0.1453.110 m:

Firefox 21.0:

The same CSS code shown above with the new changes (Only changed both occurrences from inset to solid):

.DDL.visType
{
    background-color: #bb9191;
    border-right: 2px solid #ba8c8c;
    color: #1a5c17;
}

.DDL.groupType
{
    background-color: #e7e7e7;
    border-right: 2px solid #989898;
    color: #0b3773;
}

A simple solution for a somewhat obtuse problem that should never have occurred in the first place, I suppose (why use inset for such a thing anyway?), but narrowing it down was quite difficult.