我对 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 中工作,但使输入字段消失。
有谁知道这个的解决方案?