Question

我的z-index存在问题。在Chrome和FF上，除了IE 8之外，它的效果很好。

我尝试的是什么：

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

'overlay'应位于输入字段的顶部，并使输入字段无法选择。 overloy适用于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上不会触发悬停。 “X”也可以选择。

如果我添加：

。输入的覆盖 background-color：blue;

然后它在IE中工作，但使输入字段消失。

有人知道解决方案吗？

Answer 1

IE8的z-index存在问题。定位元素生成一个新的堆叠上下文，从z-index值0开始。尝试将z-index设置为超过1000的父元素。有关详细信息，请查看http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

IE Z-Index / Hover问题

1 个答案: