[英]z-index IE7, IE8, IE9 doesn't work?
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;
}
如果單擊標簽,則輸入不會聚焦
你可以看到這里發生了什么: http : //jsfiddle.net/YKFuZ/2/
我已經更新了你的代碼 - http://jsfiddle.net/YKFuZ/6/
IE無法正確呈現z-index
。 所以將你的div
的位置設置為絕對。 並且IE不支持:focus
偽選擇器。 每當涉及IE時我會堅持使用javascript。
編輯:輸入的父級設置為相對,而輸入元素本身設置為絕對。 在這種情況下, Z-index
將無法正確呈現。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.