Eu tenho um ajaxtoolkit AutoCompleteExtender que possui position: absolute. Coloquei-o dentro de uma div com a posição: relativa. Isso faz com que o menu suspenso do extensor se posicione perfeitamente em todos os navegadores, exceto no Chrome / Safari, onde a posição é relativa à parte superior esquerda da janela em vez da div.

Quando coloco outra ul com a mesma classe css e estilo inline que o HTML gerado para o AutoCompleteExtender, o posicionamento funciona bem no Chrome. Portanto, existe algo específico para o extensor que o torna renderizado na parte inferior do código HTML (logo antes da tag final e, portanto, não usa a div como sua mãe no cálculo de sua posição.

Alguma idéia do que posso fazer para corrigir isso?

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