0

我对 z-index 有疑问。在 chrome 和 FF 上效果很好,当然在 IE 8 上除外。

我尝试什么:

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

“覆盖”应位于输入字段的顶部,并使输入字段不可选择。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' 也保持可选状态。

如果我添加:

.input-overlay 背景色:蓝色;

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

有谁知道这个的解决方案?

4

1 回答 1

0

IE8 的 z-index 有问题。定位元素生成一个新的堆叠上下文,从 z-index 值 0 开始。尝试将 z-index 设置为大于 1000 的父元素。有关更多信息,请访问 http://www.brenelz.com/blog /squish-the-internet-explorer-z-index-bug/

于 2013-10-04T09:36:41.980 回答