javascript - 修复 jQuery 自动完成下拉菜单上的差距

Question

差距

我正在使用 jQuery 自动完成功能。当我开始键入 a 并将鼠标悬停在其中一个选项时，我在右侧 看到一个空隙。

---

检查

然后，我尝试检查该列表。我可以看到样式，但下拉菜单不见了。

---

下拉消失

---

CSS

{
    background-image: url("/images/photos/devices/xperia-z-ultra.jpg");
    background-size: 28px 19px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    /* support: IE7; */
    font-weight: normal;
}
.ui-widget-content a {
    color: #222222;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

---

我该如何弥补这个差距？

我试过在 Chrome Dev Tool 上摆弄切换状态，但仍然无法设置相应的样式。

有什么提示/建议吗？

Answer 1

它看起来像是带有主题和一些修改的 jQuery UI 的自动完成小部件；但是如果你选择

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">

在左侧的 chrome 开发工具中，您可以在右侧更改

display:none;

到

display:block;

查看发生了什么并对有问题的元素进行故障排除而不让其消失