CSS с автозаполнением JQueryUI во всех браузерах

Question

Я довольно неопытен с CSS в браузерах, поэтому извиняюсь, если это просто или очевидно.

У меня есть карта листов с функцией поиска автозаполнения/комбобокса JQueryUI. Все работает отлично. У меня это выглядит так, как я хочу, в Chrome.

Если я посмотрю на поле со списком в Safari или Firefox, оно выключено на пиксель или около того (кнопка на стороне находится либо на один, либо на два пикселя выше или ниже поля ввода). И, как вы можете видеть на снимках экрана, это выглядит не очень хорошо. Ниже приведен код CSS и скриншоты.

Мой вопрос: с какими свойствами CSS я должен играть, чтобы выровнять выпадающие списки в браузерах? Есть ли сайт, который будет описывать несогласованности между браузерами, чтобы я мог знать о них?

Текущий CSS, связанные с 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 версии (хорошо выглядит):

Firefox версии (выглядит в выключенном состоянии):

Safari версии (также выключен):

Answer 1

Понял работает. Виновники были:

• эм проклейка - видимо, Chrome и Firefox имеют разные представления о том, насколько серьезно Ют с тем же шрифтом
• положения относительно против абсолютного - относительного позиционирования .custom-combobox класса было завинчивание позиционирования при сравнении друг с другом. Я полагаю, что Chrome и Firefox имеют несколько разные значения, которые они позиционируют для относительного позиционирования.