IE 9 中 <canvas> 的 z-index 问题答案

【问题标题】：z-index of <canvas> in IE 9 problemIE 9 中 <canvas> 的 z-index 问题
【发布时间】：2011-10-27 13:55:39
【问题描述】：

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

它的工作原理如下：

红色轮廓框应带有超链接并位于顶层。
青色<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 方应用程序要求以这种方式添加。

【问题讨论】：

嗯...我在 2 台带有 IE9 的不同机器上尝试了这个（其中一台是全新安装的 IE9），但都失败了。澄清一下，红框内的所有内容都需要超链接，而不仅仅是红框本身。
这不会解决问题，但值得一提。我不确定您是否使用 html5 文档类型，但如果不是，则不能将 <div> 放入 <a> 中。
这只是在 IE9 上使用 Quirks 模式时看起来“错误”。
@phrogz：我不同意你的观点。我已经在标准模式下在 Windows + IE9 上对其进行了测试，但它并没有按照操作的要求工作。
@tw16 在 IE9 标准模式下，您看到青色下方的红色轮廓框了吗？

标签： javascript css canvas internet-explorer-9 z-index

【解决方案1】：

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

如果您为#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 值，您甚至不会注意到它已被应用。

【讨论】：

IE 遇到的奇怪问题 - 但这解决了我的问题，即需要在画布元素前面的 JQuery 可拖动 div。