CSS with JQueryUI autocomplete across browsers - css

Question

I'm fairly inexperienced with CSS across Browsers, so apologies if this is simple or obvious.
I have a Leaflet map with a JQueryUI Autocomplete/Combobox search functionality. Everything is working just fine. I have it looking as I want it in Chrome.
If I take a look at the combobox in Safari or Firefox it's off by a pixel or so (the button on the side is either one or two pixels above or below the input box). And as you can see in the screen shots, it doesn't look good at all. Below is the CSS code and screen shots.
My question is: what CSS properties should I be playing with to get the combobox aligned across browsers? Is there a website that will describe the cross-browser inconsistencies so I can be aware of them?
Current CSS related to Combobox:
.custom-combobox {
position: relative;
display: inline-block;
margin: 2px;
}
.custom-combobox-toggle {
position: absolute;
top: -1px;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
width: 140px;
}
.custom-combobox .ui-button-text {
height: 14px;
}
Chrome Version (looks good):
Firefox Version (looks off):
Safari Version (also off):

Answer 1

Got it working. The culprits were:
em sizing - apparently Chrome and Firefox have different ideas of how big an Em is with the same font
position relative vs absolute - the relative positioning of the .custom-combobox class was screwing up the positioning when compared side by side. I imagine Chrome and Firefox have slightly different values they position off of for relative positioning.