IE7 z-index с неупорядоченным списком

Question

Следующий пример - очень упрощенная версия моей верхней навигации.

http://jsfiddle.net/AEqxT/

Если вы смотрите в большинстве браузеров, вы должны увидеть два зеленых элементы списка рядом с Афоризм, с синей коробкой или «значком» сидит на вершине, преодоление разрыва между ними. Однако в IE7 синий ящик всегда падает ниже второго ли. Я пробовал всевозможные исправления. Установка более высокого z-индекса родительской ul ничего не изменила, и если я использую position: relative; на «значке», он теряет свою ширину и высоту.

Есть ли очевидное право на это, что мне не хватает?

Answer 1

Вы, вероятно, бороться с вашим значком в с LI, вывести его из списка, и вы должны быть в порядке, с немного баловаться с позиции:

http://jsfiddle.net/AEqxT/2/

Если вы абсолютно чтобы получить его в LI, тогда вам, вероятно, придется использовать JS для этой работы.

Answer 2

Это reported IE7 bug.

Вы можете это исправить с решением JS публикуемую в this question, или вы можете вручную установить различные Z-индексы для всех <li> элемента, упорядоченный от высоких до низких значений:

http://jsfiddle.net/AEqxT/3/