html - CSS - 无法在 Internet Explorer 中正确应用 z-index

Question

我写了一个 jQuery 脚本来替换 <select />带有一些 DIV 和 UL 的元素允许我模拟原始的 SELECT，但也允许我设置它的样式。到目前为止，除了一些小错误外，它运行得相当好。

但是，在 Internet Explorer 中，“选项”div 呈现在 div 下面的元素之下。

这是 HTML:

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li class="styledSelect-active">Test4</li>
            <li>Test1</li>
            <li>Test2</li>
         </ul>
      </div>
   </div>
</div>

<br /><br />

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li class="styledSelect-active">Test1</li>
            <li>Test2</li>
            <li>Test3</li>
         </ul>
      </div>
   </div>
</div>

如果我打开第一个选择框，LI 列表位于第二个选择框下方而不是上方。我无法让 z-indexes 正常工作。

我错过了什么？ :/

编辑: 我应该指出 HTML 是从 jQuery 动态生成的。完整代码可见here .

Answer 1

“在 Internet Explorer 中，定位元素生成一个新的堆叠上下文，从 0 的 z-index 值开始。因此 z-index 不能正常工作”。 http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html