IE Z索引/悬停问题

Question

I have an issue with z-index. 我的z-index有问题。 On chrome and FF it works great, except on IE 8 ofcourse. 在chrome和FF上，它的效果很好，当然在IE 8上除外。

what i try: 我尝试的是：

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

The 'overlay' should be on top of the inputfield and making the inputfield unselectable. “覆盖”应位于输入字段的顶部，并使输入字段不可选择。 The overloy works on FF but not on IE. 过度工作适用于FF，但不适用于IE。

The source code: 源代码：

<!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>

The hover doesnt get triggered on IE when moving the mouse in the center of the inputfield. 当在输入字段的中心移动鼠标时，悬停不会在IE上触发。 Also the 'X' stays selectable. 同样，“ X”保持可选择状态。

if i add: 如果我添加：

.input-overlay background-color:blue; .input-overlay background-color：blue;

Then it works in IE, but making the inputfield disappear. 然后它可以在IE中使用，但会使输入字段消失。

Does any one know the solution for this? 有谁知道解决方案吗？

Answer 1

IE8 has a problem with z-index. IE8的z-index有问题。 Positioned elements generate a new stacking context, starting with a z-index value of 0. Try setting z-index to the parent element with more than a 1000. For more info find out on http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ 定位的元素会生成一个新的堆叠上下文，其z-index值从0开始。尝试将z-index设置为大于1000的父元素。有关更多信息，请参见http://www.brenelz.com/blog / squish-the-internet-explorer-z-index-bug /

IE Z索引/悬停问题

问题描述

1 个解决方案

解决方案1
0

IE Z索引/悬停问题

问题描述

1 个解决方案

解决方案1 0

解决方案1
0