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

Don*_*Don 10 javascript css canvas z-index internet-explorer-9

我遇到一个奇怪的问题,z的索引为a <canvas>; 不能在IE9中渲染为正确的图层.请看看这个jsfiddle:

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

这是它应该如何工作:

  • 红色方框应该是超链接的,并且是顶层.
  • 青色<canvas>应该是下一层.
  • 带绿色背景的方框应位于底部.

这适用于Chrome,Firefox甚至IE8.但是,在IE9中,青色<canvas>是顶层,红色轮廓的超链接框不再可点击,除了底部的小区域,它不覆盖青色<canvas>.

这是另一件值得注意的事情:如果你改变了<canvas>a <div>即改变了这条线:

var can = $('<canvas></canvas>').css({...
Run Code Online (Sandbox Code Playgroud)

var can = $('<div></div>').css({...
Run Code Online (Sandbox Code Playgroud)

它也适用于IE9.这让我相信这是一个<canvas>相关的问题,而不仅仅是一个z指数问题.

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

PS有些人可能会问为什么<canvas>要通过JavaScript添加它以及为什么它被添加为第一个元素<body>.没有详细说明,使用<canvas>它的第三方应用程序要求以这种方式添加它.

tw1*_*w16 20

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

如果您background-color为其中一个设置了一个,#box2或者#box3该链接变为可点击.实例: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 */
}
Run Code Online (Sandbox Code Playgroud)

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