css - z-index 在 IE8 中不工作。为什么？

Question

我正在尝试使用纯 css 设置组合框的样式并找到一些教程并创建了组合框。它在 chrome 和 firefox 上运行良好。

请看一下我创建的样式。

http://jsfiddle.net/SnU3d/1

label
{
    position:relative;
    z-index:9999;
}


label:after 
{
    content:'?';
    font:11px "Consolas", monospace;
    color:#009FDF;
    font-size:120%;
    pointer-events:none;
    background: #fff;
    border:1px solid #999;
    width:30px;
    height:24px;
    margin-bottom:2px;
    position:absolute;
    border-left:0px;
    right:-1px;
    z-index:99;
}

我找到了一些与此相关的其他教程。 IE7 / IE8 z-index problem , enter link description here .

所以我为父标签设置了更高的zindex值。但是after伪元素仍然没有出现在IE8中。为什么 ？我怎样才能让后面的内容可见。

Answer 1

:after 伪元素创建您应用它的元素的子元素 (Label)，以及您分配给父元素的 z-index 值 (label)，无论该值是什么，都会在该元素内创建一个新的堆栈上下文，因此您最终会在其堆栈上下文的第 9999 层得到一个父元素 (label)，和一个子元素 (label:after) 在它自己的堆栈上下文的第 99 层中，父元素 (label) 总是作为背景(底部).