z-index IE7、IE8、IE9 不起作用？

Question

z-index CSS 属性在 Internet Explorer 7、8 和 9 上不起作用。如何解决此问题？

HTML：

<div>
    <input type="text">
    <span>label</span>
</div>

CSS：

body{background:#ddd;}
div{
    position:relative;
    width:250px;
    height:30px;
    line-height:30px;
    background:#fff;
    border:1px solid #666;
    z-index:0;
}
input{
    background:none;
    border:0;
    position:absolute;
    top:0px;
    left:0px;
    width:242px;
    height:22px;
    padding:4px;
    z-index:2;
    *line-height:30px; /* ie7 needs this */
    line-height /*\**/: 30px\9; /* ie8 needs this */
}
span{
    position:absolute;
    top:0px;
    left:4px;
    z-index:1;
}
input:focus + span{
    filter: alpha(opacity=50);
    -khtml-opacity: 0.50;
    -moz-opacity: 0.50;
    opacity: 0.50;
}

如果单击标签，输入不会聚焦

您可以在此处看到发生的情况： http ://jsfiddle.net/YKFuZ/2/

Answer 1

我已经更新了你的代码 - http://jsfiddle.net/YKFuZ/6/

IE无法正确渲染 z-index。因此，将 div 的位置设置为绝对位置。并且 IE 不支持 :focus 伪选择器。每当涉及 IE 时我都会坚持使用 javascript。

编辑：输入的父级设置为相对，而输入元素本身设置为绝对。在这种情况下，Z-index 将无法正确呈现。