Javascript <；帆布>；在IE9问题中

我遇到了一个奇怪的问题，a的z索引

；在IE9中没有渲染为正确的层。请看一下这个JSFIDLE：

以下是它的工作原理：

• 红色框应该是超链接的，并且是顶层
• 青色
  应位于下一层
• 背景为绿色的框应位于底部

这在Chrome、Firefox甚至IE8中都能正常工作。然而，在IE9中，青色

是顶层，红色轮廓的超链接框不再可点击，除了底部的小区域，它不会覆盖青色

这里还有一点需要注意：如果您将

更改为

，即更改行：

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

var can=$（''）.css（{。。。

到

var can=$（''）.css（{。。。

这让我相信这是一个与

相关的问题，而不仅仅是一个z索引问题

我已经尝试了许多基于网络上的建议的z索引组合，但似乎没有任何效果。如果有人对此有答案，我将不胜感激

---

另外，有些人可能会问为什么要通过JavaScript添加

，以及为什么要将其作为

的第一个元素添加。没有详细说明，使用

的第三方应用程序要求以这种方式添加它。

不要问我为什么，但出于某种原因，问题似乎是因为没有背景信息把你的箱子装上

如果为

#box2

或

#box3

设置

背景色，则链接将变为可单击的链接。实时示例：

因此，您可以使用：

.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值，您甚至不会注意到它已被应用。
Hmm…我在两台独立的IE9机器上尝试了这一点（其中一台是全新安装的IE9）两者都失败了。为了澄清，红色轮廓框内的所有内容都需要超链接，而不仅仅是红色轮廓本身。这不会解决问题，但值得一提。我不确定您是否使用html5 doctype，但如果您没有，则不能将
放在
中。这只在使用Quirk时看起来是“错误的”IE9上的s模式。@phrogz:我不同意你的看法。我在Windows+IE9上以标准模式测试了它，但它不能像op所希望的那样工作。@tw16你看到IE9标准模式下青色下面的红色框了吗？IE有一个奇怪的问题-但这解决了我的问题，即JQuery可拖动div需要在画布元素前面T
.box2{
    z-index: 10;
    position: relative;
    min-width: 200px;
    min-height: 200px;
    background-color: rgba(255,255,255,0.01); /* this is basically transparent */
}