Ошибка Z-индекса в IE6 / IE7

Question

Взгляните на следующий веб-сайт: http://driz.co.uk/mars/index.html

Если вы посмотрите на ползунок jQuery в правом нижнем углу в IE6 / IE7, вы заметите, что оранжевые стрелки появляются за наложением градиента белого, даже если для z-индекса стрелок установлены более высокие значения, чем для накладки.

Он отлично работает во всех других браузерах, в которых я его тестировал, включая IE8, только 7 и 6 неправильно отображают индексирование. Есть идеи? Нужно выпустить этот проект как можно скорее. Спасибо.

Answer 1

Это задокументированная ошибка в IE6. Quarksmode.org имеет статью об этом. http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

Приведенная выше статья не содержит обходного пути, но в комментариях сотрудник упомянул, что предоставление родительскому элементу более высокого фактического z-индекса исправляет ошибку. Не спрашивайте меня, почему это работает, но это работает!

<div style="z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />