[英]z-index IE7, IE8, IE9 doesn't work?
The z-index
CSS property doesn't work on Internet Explorer 7, 8 and 9. How can I workaround this problem? z-index
CSS属性在Internet Explorer 7,8和9上不起作用。如何解决此问题?
<div>
<input type="text">
<span>label</span>
</div>
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;
}
If you click on the label, the input doesn't focus 如果单击标签,则输入不会聚焦
You can see what happens here: http://jsfiddle.net/YKFuZ/2/ 你可以看到这里发生了什么: http : //jsfiddle.net/YKFuZ/2/
I've updated your code a bit - http://jsfiddle.net/YKFuZ/6/ 我已经更新了你的代码 - http://jsfiddle.net/YKFuZ/6/
IE doesn't render z-index
properly. IE无法正确呈现
z-index
。 So set your div
's Position to absolute. 所以将你的
div
的位置设置为绝对。 And IE doesn't support the :focus
pseudo-selector. 并且IE不支持
:focus
伪选择器。 I would stick to javascript whenever IE is concerned. 每当涉及IE时我会坚持使用javascript。
EDIT: The input's parent is set to relative whereas the input element itself is set to absolute. 编辑:输入的父级设置为相对,而输入元素本身设置为绝对。
Z-index
will not be properly rendered in such a case. 在这种情况下,
Z-index
将无法正确呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.