跨浏览器的JQueryUI自动完成CSS

Question

我对浏览器中的CSS相当缺乏经验，如果这很简单或显而易见，请道歉。

我有一个带有JQueryUI Autocomplete / Combobox搜索功能的Leaflet地图。一切都很好。我看起来就像在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版本（也关闭）：

Answer 1

搞定了。罪魁祸首是：

• 大小调整 - 显然Chrome和Firefox对使用相同字体的Em的大小有不同的看法
• 位置相对vs绝对 - .custom-combobox类的相对位置在并排比较时拧紧了定位。我认为Chrome和Firefox的价值略有不同，相对于相对定位而言。