How do I make a stylesheet class behave just a little bit differently only in Firefox alone?

Today I had the challenge of making an image with a line of text within it line up with some actual text in HTML while sitting side-by-side with it on the same line of copy. I ended up wrapping the image in a div which sat inline and then making the image break the rules of where it was positioned with absolute positioning as, honestly, the div was already doing the positioning. Here are some of my CSS classes:

.NoteRowImage
{
   margin-top: -3px;
   position: absolute;
}
@-moz-document url-prefix() {
   .NoteRowImage
   {
      margin-top: -2px;
      position: absolute;
   }
}
.NoteRowImageWrapper
{
   display: inline;
   width: 150px;
   height: 5px;
}

 
 

You can probably tell which one adorned the image and which one adorned the div. I found this trick for the Firefox tweak at StackOverflow though I cannot remember where. The thread suggested it will only work if JavaScript is working too.