html - AJAX控制工具箱自动完成出现在模式弹出窗口的后面

我在AJAX控件工具箱中遇到了AutoCompleteExtender的问题，我似乎无法深入了解它。该控件位于从工具箱链接到ModalPopupExtender的asp:Panel内部。在最新一代的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索引也是内联样式，因此它们显然直接来自控件。我在这里想念什么吗？有什么建议么？ (除了放弃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;
}

我知道这有点骇人听闻，但是如果您还没有尝试过，那么值得一试吗？