Webkit 中的 AutoCompleteExtender 位置错误

Posted 2023-03-06

【中文标题】Webkit 中的 AutoCompleteExtender 位置错误

【英文标题】：AutoCompleteExtender position is wrong in Webkit

【发布时间】：2012-01-10 10:49:28

【问题描述】：

我有一个 ajaxtoolkit AutoCompleteExtender，它有 position: absolute。我把它放在一个 div 中，位置为：relative。这使得扩展下拉菜单完美地放置在所有浏览器上，除了 Chrome/Safari，其位置相对于窗口的左上角而不是 div。

当我放置另一个具有与为 AutoCompleteExtender 生成的 html 相同的 css 类和内联样式的 ul 时，定位在 Chrome 中可以正常工作。所以扩展器有一些特定的东西使它呈现在 HTML 代码的底部（就在结束标记之前，因此在计算它的位置时不使用 div 作为它的父级。

有什么想法可以解决这个问题吗？

代码：

<div class="searching">
<ajaxToolkit:AutoCompleteExtender 
            runat="server" 
            ID="biznameOrCategoryAutoComplete" 
            TargetControlID="txtBizNameOrCategory"
            ServicePath="~/AutoComplete.asmx"
            ServiceMethod="GetBiznameOrCategoryCompletionList"
            MinimumPrefixLength="1" 
            CompletionInterval="1000"
            EnableCaching="true"
            CompletionSetCount="10" 
            CompletionListCssClass="autocomplete_completionCompyNameListElement" 
            CompletionListItemCssClass="autocomplete_listItem" 
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
            ShowOnlyCurrentWordInCompletionListItem="true">
        </ajaxToolkit:AutoCompleteExtender>
</div>

CSS：

.searching 
margin-left:5px;
padding-top:10px;
width:366px;
position: relative;

.autocomplete_completionCompyNameListElement 
background: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 17px;
width: 340px !important;
left: 20px !important;
border: 1px solid #d9d9d9;
font-size: 12px;
top: 48px !important;
padding: 2px 4px !important;

【参考方案1】：

尝试在扩展器之后添加纯 HTML <div> 元素，并指定 id 属性并将此 id 值用于扩展器的 CompletionListElementID 属性。

当您将id 传递给扩展器时，它将作为<div> 元素插入项目。因此，添加纯 HTML <div> 而不是 <ul> 可以保持有效的 HTML。

【讨论】：

嘿，我在这个扩展器位置上遇到了同样的问题，即我尝试按照您的建议进行操作，但没有区别***.com/questions/9288125/…

当您将 id 传递给 CompletionListElementID 时，插入该元素的项目是 div。我已编辑您的答案，建议插入 <div> 而不是 <ul> 以保持有效的 HTML