gpt4 book ai didi

html - IE Z-Index/悬停问题

转载 作者:行者123 更新时间:2023-11-28 12:15:52 25 4
gpt4 key购买 nike

我对 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”也保持可选状态。

如果我添加:

.input-overlay背景颜色:蓝色;

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

有人知道解决这个问题的方法吗?

最佳答案

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

关于html - IE Z-Index/悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19177581/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com