Tengo un AutoCompleteExtender ajaxtoolkit que tiene posición: absoluta. Lo he colocado dentro de un div con posición: relativo. Esto hace que el menú desplegable del extensor se coloque perfectamente en todos los navegadores, excepto en Chrome / Safari, donde la posición es relativa a la parte superior izquierda de la ventana en lugar del div.

Cuando coloco otro ul con la misma clase css y estilo en línea que el HTML que se genera para AutoCompleteExtender, el posicionamiento funciona bien en Chrome. Por lo tanto, hay algo específico en el extensor que lo hace renderizar en la parte inferior del código HTML (justo antes de la etiqueta final y, por lo tanto, no usa el div como padre al calcular su posición.

¿Alguna idea de lo que puedo hacer para solucionar esto?

Código

<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;
}