css - 基于 jQuery 的下拉菜单显示 Firefox 之外的差距

Question

我在 jQuery 中创建了一个非常简单的自动完成下拉小部件，您可以将其应用于input元素。input它工作得很好，但由于某种原因，下拉列表在 Firefox 以外的浏览器中显示了 和列表之间的差距（在 IE、Safari 和 Chrome 中测试）。

我在jsFiddle中对此进行了模拟，以演示问题，却发现它在所有浏览器中都能正常工作......直到我取消了“标准化 CSS”选项。然后在IE等中再次出现差距，但在Firefox中仍然可以正常工作。这是一个屏幕截图：

因此，这显然是一个 CSS 问题。但是，我无法终生找出问题所在。我已经查看了 jsFiddlenormalize.css并从那里尝试了一些东西（主要将各种选择器的填充和边距设置为 0px），但我无法让它工作！关于如何更改我的 CSS 以使所有浏览器中的差距消失的任何想法？

Answer 1

只需将 div.popup ul 上的上边距设置为 0px，我就能够摆脱差距。

div.popup ul {
list-style: none;
background: red;
padding: 0px;
margin-top: 0px;
}