IE Z-Index / Hover проблема

Question

IE Z-Index / Hover проблема

0

У меня проблема с z-index. На хром и FF он отлично работает, за исключением IE 8.

что я пытаюсь:

<container>
  <inputfield>
  <overlay-of-the-inputfield>
</container>

"Оверлей" должен быть сверху поля ввода и сделать недействительным входное поле. Оверлей работает на FF, но не на IE.

Исходный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
.input-overlay{
    position:absolute;
    left:0;
    top:0;
    width:15px;
    height:16px;
    border:2px solid #A0C8FA;
    border-radius:2px;
}        
.input-overlay:focus{
    border:2px groove #A0C8FA;
    border-radius:2px;
}    
.input-overlay:hover{
    border:2px dashed #4D82C4;
    border-radius:2px;
z-index:150;
}
.input-checkbox-textfield{
    width:15px;
    height:20px;
    position:absolute;
    left:0;
    top:0;
}    
.inputfield-checkbox{
    width:15px;
    border:none;
    padding-left:4px;
    font-weight:700;
}
</style>
</head>    
<body>
<DIV style="Z-INDEX:10;">
    <DIV style="Z-INDEX: 100" 
         id="indonesier_uiterlijkIDOverlay" 
         class="input-overlay"
         tabIndex="5">
     </DIV>
    <DIV style="Z-INDEX: 1" 
         class="input-checkbox-textfield">
             <INPUT type="text"
                    style="Z-INDEX: 1;" 
                    id="inputField" 
                    value="X"
                    class="inputfield-checkbox"/> 
    </DIV>
</DIV>    
</body>
</html>

Наведение не запускается при запуске IE при перемещении мыши в центре поля ввода. Также "Х" остается доступным.

если я добавлю:

.input-overlay background-color: синий;

Затем он работает в IE, но при этом исчезает входное поле.

Кто-нибудь знает решение для этого?

W vd L 04 окт. 2013, в 11:43

Источник

Теги:

html

css

internet-explorer

1 ответ

Ещё вопросы

user2578173 · Answer 1 · 2013-10-04T07-16-00.000Z

У IE8 есть проблема с z-index. Позиционируемые элементы генерируют новый контекст стекирования, начиная с значения z-индекса равным 0. Попробуйте установить z-index на родительский элемент с более чем 1000. Более подробную информацию можно найти на http://www.brenelz.com/blog/мармелад-The-интернет-исследователь-Z-индекс-ошибка/