我在
AJAX Control Toolkit中遇到了AutoCompleteExtender的问题,我似乎无法深入到底.该控件位于一个asp：Panel中,该工具包链接到ModalPopupExtender.在IE9,FF和Opera的最新一代中,一切都很美妙,但Safari和Chrome中的故障(假设它与WebKit相关).
故障是自动完成的下拉落后于模式弹出窗口,而不是在它前面(由于隐私原因,名称模糊)：
查看Firebug中的内容,这是在无序列表中呈现的下拉列表：
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
autoCompleteList类如下所示：
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
模态弹出窗口的结果div如下所示：
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
使用以下modalPopup CSS类：
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
我的假设是列表中较低的z-index导致它落后于div,但是再次,它在非WebKit浏览器中表现得很好. z-index也是内联样式,所以它们显然是直接来自控件.我在这里错过了什么吗？有什么建议？ (除了放弃WebForms和AJAX并使用jQuery)
解决方法
看到你怀疑这是导致问题的z-index,如果你尝试使用！important来覆盖Ajax Control Toolkit吐出的内联样式会发生什么？
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
我知道这有点像黑客,但如果你还没有尝试过它可能值得一试？
