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

发布于 2024-08-30 03:55:11 字数 1943 浏览 11 评论 0原文

我编写了一个 jQuery 脚本来用一些 DIV 和 UL 替换

然而，在 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 索引正常工作。

我缺少什么？ :/

编辑： 我应该指出 HTML 是从 jQuery 动态生成的。完整代码可以在此处找到。

原文

I've written a jQuery script to replace <select /> elements with some DIV's and UL's allowing my to simulate the original SELECT but also allow me to style it. So far, aside from a few minor bugs, it works rather nicely.

However, in Internet Explorer, the 'options' div is getting rendered underneath the elements below the div.

Here's the 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>

If I open the first select, the LI list sits underneath the second select box rather than above it. I can't get the z-indexes to work properly.

What am I missing? :/

EDIT: I should point out the HTML is generated dynamically from jQuery. The full code can be found here.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蹲在坟头点根烟 2024-09-06 03:55:11

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

回复收藏 0 原文

~没有更多了~