Как бы вы исправили этот необычный пример распространенной ошибки IE Z-index? - PullRequest
0 голосов
/ 31 августа 2010

Может показаться, что это общий вопрос, на который уже дан ответ, поскольку он относится к известной ошибке z-index в IE7 и ниже. Тем не менее, эта ситуация несколько уникальна;

Я использую раскрывающееся меню CSS, которое использует вложенные списки для подменю. Я использовал это много раз на других сайтах, но обычно первый уровень был горизонтальным. В этом случае первый уровень должен быть вертикальным, а подменю должны выпадать, а не опускаться.

Вдобавок ко всему, все это сложно, потому что первый уровень «оборачивается» в кривую в дизайне, и меню ul плавает, чтобы приспособить другое расположение на внутренних страницах. Плавающее вызывает всевозможные проблемы с очевидными решениями, потому что, если z-индекс выше, чем контент на странице, ссылки в этом контенте покрываются пунктами меню верхнего уровня.

Во всяком случае, с большим терпением я заставил его работать отлично, за исключением IE7 и ниже. У меня проблема в том, что IE хочет поместить подменю под пунктами меню верхнего уровня (это ожидаемое поведение для IE, я так понимаю). Но поскольку элементы верхнего уровня находятся на кривой, некоторые всплывающие меню в конечном итоге перекрываются элементами верхнего уровня.

Как, по общему признанию, ужасное исправление, я использовал взлом звезды в моем CSS, чтобы добавить отступы в всплывающие меню. Это делает их функциональными, но на самом деле не решает проблему и не выглядит привлекательно.

Итак, просмотрите сайт и дайте мне знать, если у вас есть идеи. Спасибо!

1 Ответ

1 голос
/ 01 сентября 2010

Вы захотите взять все li на верхнем уровне и установить их значения z-index постепенно, по мере того, как вы спускаетесь по странице. Например, начиная с верхней части «Поиск свойства», присвойте значения z-index 99, 98, 97 и т. Д. Это должно сделать так, чтобы дочерние элементы (подменю) каждого li были на более высоком z-index стек, чем корневые элементы, следующие за ними на странице.

...