css - 具有JQueryUI的CSS跨浏览器自动完成

我对跨浏览器的CSS经验不足，因此，如果这很简单或很明显，就深表歉意。

我有一个带有JQueryUI自动完成/组合框搜索功能的传单地图。一切都很好。我可以在Chrome中找到它。

如果我看看Safari或Firefox中的组合框，它的距离大约是一个像素（侧面的按钮在输入框的上方或下方是一两个像素）。正如您在屏幕快照中看到的那样，它看起来一点也不好。以下是CSS代码和屏幕截图。

我的问题是：我应该使用哪些CSS属性来使组合框在浏览器中对齐？是否有一个网站描述跨浏览器的不一致之处，以便让我知道？

当前与Combobox相关的CSS：

.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版本（也已关闭）：

最佳答案

得到它的工作。罪魁祸首是：


尺寸调整-显然，Chrome和Firefox对于使用相同字体的Em的大小有不同的想法
相对位置和绝对位置-并排比较时，.custom-combobox类的相对位置使位置更加混乱。我认为Chrome和Firefox具有相对定位时略有不同的值。