z-index IE7, IE8, IE9 не работает? - PullRequest
Новая
       21

z-index IE7, IE8, IE9 не работает?

0 голосов
/ 26 августа 2011

Свойство 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/

1 Ответ

2 голосов
/ 26 августа 2011

Я немного обновил ваш код - http://jsfiddle.net/YKFuZ/6/

IE не отображает z-index правильно. Так что установите ваше div в абсолютное положение. И IE не поддерживает псевдоселектор :focus. Я бы придерживался JavaScript, когда дело касается IE.

РЕДАКТИРОВАТЬ: Родитель входа установлен на относительный, тогда как сам элемент ввода установлен на абсолютный Z-index не будет правильно отображаться в таком случае.

...