Target CSS only Firefox on Mac - css

Question

I have some alignment problem in my coding. In Windows, all the browsers seems okay. But when I checked it in Mac firefox, the alignment is not perfect. I can fix it by changing the value a bit. But it should be only for Firefox on Mac.
Is there any CSS attributes or something for this?
Example: http://jsfiddle.net/9chk5/
.notes {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
margin: 0 auto;
background: #abc;
}
.search-notes {
font-size: 14px;
color: #484848;
position: relative;
top: -20px;
margin: 0 25px 0 22px;
}
and the HTML
<div class="notes" style="top:2px"></div><div class="search-notes">This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. This link is used to get information about the visitors from the google organic search. </div>
</div>

Answer 1

You can use classes to achieve what you want. Sniff out the user's Browser and OS and add a class to body for your specific case. E.g. apply macFirefox class to body if user is using Firefox on Mac, then in CSS use .macFirefox .yourClass { /*CSS rules*/ }.
However it will be better to apply styles in a way which are crossbrowser.
For example in your particular case changing style to
.search-notes {
font-size: 14px;
color: #484848;
position:absolute;
display:inline;
/* position: relative;
top: -20px;
margin: 0 25px 0 22px; */
}
should do the trick.
Updated your fiddle

Answer 2

You can step into the gray area of undocumented feature queries. This way you can target only Firefox on Mac:
#supports (-moz-osx-font-smoothing: auto) {
#firefox-on-mac { display: block; }
}
And if you want to target all Firefox, except those which are on Mac, do this:
#supports (-moz-appearance: none) and (not (-moz-osx-font-smoothing: auto)) {
#firefox-not-on-mac { display: block; }
}
I am deliberately not using #-moz-document, because it has been disabled for public use per Firefox bug #1035091.
See this codepen for practical example.