Я испытываю странную проблему с z-индексом <canvas>; не рендеринг как правый слой в 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-индексов на основе предложений, найденных в Интернете, но ничего не работает. Если у кого-то есть ответ на этот вопрос, мы будем очень благодарны.
P.S. Некоторые могут спросить, почему <canvas> добавляется через JavaScript и почему он добавляется в качестве первого элемента <body>. Не вдаваясь в подробности, стороннее приложение, использующее <canvas>, требует, чтобы он был добавлен таким образом.
