IE 10不尊重z-index

时间:2014-04-28 15:08:30

标签: javascript jquery html css internet-explorer

我的页面上有一个固定大小和位置的div。 (不幸的是,我不允许分享这段代码,如果可以,请耐心等待我)。我希望在双击时重新启用禁用的输入,但您可能知道禁用的输入不喜欢触发单击事件。我想出了一个解决方案,其中包括input绝对定位在相对定位的容器内部以及具有相同尺寸和位置的绝对定位div。双击时我将div的显示更改为none。这在其他浏览器中运行得很漂亮,但IE 10(我没有检查过较低版本)不尊重我放在div和输入上的z-indexes。 div的z-index为2,输入的z-index为1,但IE忽略了这一点,并允许我点击“通过”div并进入输入,就像div不在那里一样。我不是要求任何人调试我的代码,因为我无法显示它但我会很感激任何已知的解决方法,如果这是一个常见的问题/错误。

2 个答案:

答案 0 :(得分:6)

Internet-Explorer非常棘手,尤其是z-index和position。

好的,解决方案是什么? 努力工作。确保元素大部分都有位置。某些地方必须使用position: relative;

要解决z-index的问题,您必须从最高父级(<html>)到所有子级并将每个子级设置为z-index(以0开头),增加每个z-index,例如:

html {
    z-index:    0;
}

body {
    z-index:    1;
}

header {
    z-index:    2;
}

header nav {
    z-index:    3;
}

通常,请检查有效性:HTML ValidatorCSS Validator

答案 1 :(得分:1)

添加:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

确保您的doctype已设置

<!doctype html>