z-index в IE 9 проблема

У меня странная проблема с z-индексом ; не отображается как правильный слой в IE9. Пожалуйста, взгляните на этот jsfiddle:

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

Вот как это должно работать:

  • Обведенное красным поле должно иметь гиперссылку и быть верхним слоем.
  • Голубой должен быть следующим слоем.
  • Поле с зеленым фоном должно быть внизу.

Это правильно работает в Chrome, Firefox и даже IE8. Однако в IE9 голубой является верхним слоем, а выделенное красным поле гиперссылки больше не является активным, за исключением небольшой области внизу, где он не перекрывает голубой .

Вот еще одно примечание: если вы измените на

, то есть измените строку:
var can = $('').css({...

на

var can = $('
').css({...

Это будет работать и в IE9. Это наводит меня на мысль, что это проблема, связанная с , а не просто с проблемой z-индекса.

Я пробовал много комбинаций z-индексов на основе предложений, найденных в Интернете, но вроде ничего не работает. Если у кого-то есть ответ на этот вопрос, я буду очень признателен.

P.S. Некоторые могут спросить, почему добавляется через JavaScript и почему он добавляется как первый элемент . Не вдаваясь в подробности, стороннее приложение, использующее , требует его добавления таким образом.

10
задан tw16 15 August 2011 в 21:29
поделиться