gpt4 book ai didi

javascript - IE 9 中 的 z-index 问题

转载 作者:可可西里 更新时间:2023-11-01 02:33:22 28 4
gpt4 key购买 nike

我遇到一个关于 <canvas> 的 z-index 的奇怪问题;在 IE9 中不呈现为正确的图层。请看一下这个 jsfiddle:

http://jsfiddle.net/xacto/MTUHX/

它应该是这样工作的:

  • 红色轮廓框应带有超链接并位于顶层。
  • 青色<canvas>应该是下一层。
  • 绿色背景的框应该在底部。

这在 Chrome、Firefox 甚至 IE8 中都可以正常工作。但是,在 IE9 中,青色 <canvas>是顶层,除了底部的小区域没有覆盖青色 <canvas> 外,红色轮廓的超链接框不再可点击。 .

这是另一件值得注意的事情:如果您更改 <canvas><div>即更改行:

var can = $('<canvas></canvas>').css({...

var can = $('<div></div>').css({...

它也适用于 IE9。这让我相信这是一个 <canvas>相关问题而不仅仅是 z-index 问题。

我根据网络上的建议尝试了多种 z-index 组合,但似乎没有任何效果。如果有人对此有答案,将不胜感激。

附言有些人可能会问为什么 <canvas>正在通过 JavaScript 添加以及为什么将其添加为 <body> 的第一个元素.无需详细说明,使用 <canvas> 的第 3 方应用程序要求以这种方式添加。

最佳答案

不要问我为什么,但出于某种原因,问题似乎是因为您的盒子上没有设置背景。

如果您为 #box2#box3 设置了 background-color,链接将变为可点击。现场示例:http://jsfiddle.net/tw16/HFKMC/

所以你可以使用:

.box2{
z-index: 10;
position: relative;
min-width: 200px;
min-height: 200px;
background-color: rgba(255,255,255,0.01); /* this is basically transparent */
}

通过使用 rgba 并设置一个非常低的 alpha 值,您甚至不会注意到它已被应用。

关于javascript - IE 9 中 <canvas> 的 z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7070457/

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